> For the complete documentation index, see [llms.txt](https://e-plus-agency.gitbook.io/plus-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/scroll-animate.md).

# Scroll Animate

📢 Use this project, [contribute](https://github.com/{OrganizationName}/{AppName}) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

## Scroll Animate

Under the app's name, you should explain the topic, giving a **brief description** of its **functionality** in a store when installed.

Next, **add media** (either an image of a GIF) with the rendered components, so that users can better understand how the app works in practice.

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

#### `scroll-animate` props

| Prop name           | Type          | Description | Default value |
| ------------------- | ------------- | ----------- | ------------- |
| `scrollTopDistance` | `number`      | XXXXXXXX    | `150`         |
| `animateIn`         | `enum`        | XXXXXXXX    | `fadeIn`      |
| `animateOut`        | `enum`        | XXXXXXXX    | `fadeOut`     |
| `duration`          | `number`      | XXXXXXXX    | `1`           |
| `initiallyVisible`  | `boolean`     | XXXXXXXX    | `false`       |
| `delay`             | `number`      | XXXXXXXX    | `0`           |
| `animateOnce`       | `boolean`     | XXXXXXXX    | `false`       |
| `mode`              | `whenVisible` | `distance`  | XXXXXXXX      |
| `animateOnMount`    | `boolean`     | XXXXXXXX    | `true`        |

`animationIn` and `animationOut` possible values:

| Animation Names                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 'bounce'                                                                                                                                                      |
| 'flash'                                                                                                                                                       |
| 'pulse'                                                                                                                                                       |
| 'rubberBand'                                                                                                                                                  |
| 'shake'                                                                                                                                                       |
| 'headShake'                                                                                                                                                   |
| 'swing'                                                                                                                                                       |
| 'tada'                                                                                                                                                        |
| 'wobble'                                                                                                                                                      |
| 'jello'                                                                                                                                                       |
| 'bounceIn'                                                                                                                                                    |
| 'bounceInDown'                                                                                                                                                |
| 'bounceInLeft'                                                                                                                                                |
| 'bounceInRight'                                                                                                                                               |
| 'bounceInUp'                                                                                                                                                  |
| 'bounceOut'                                                                                                                                                   |
| 'bounceOutDown'                                                                                                                                               |
| 'bounceOutLeft'                                                                                                                                               |
| 'bounceOutRight'                                                                                                                                              |
| 'bounceOutUp'                                                                                                                                                 |
| 'fadeIn'                                                                                                                                                      |
| 'fadeInDown'                                                                                                                                                  |
| 'fadeInDownBig'                                                                                                                                               |
| 'fadeInLeft'                                                                                                                                                  |
| 'fadeInLeftBig'                                                                                                                                               |
| 'fadeInRight'                                                                                                                                                 |
| 'fadeInRightBig'                                                                                                                                              |
| 'fadeInUp'                                                                                                                                                    |
| 'fadeInUpBig'                                                                                                                                                 |
| 'fadeOut'                                                                                                                                                     |
| 'fadeOutDown'                                                                                                                                                 |
| 'fadeOutDownBig'                                                                                                                                              |
| 'fadeOutLeft'                                                                                                                                                 |
| 'fadeOutLeftBig'                                                                                                                                              |
| 'fadeOutRight'                                                                                                                                                |
| 'fadeOutRightBig'                                                                                                                                             |
| 'fadeOutUp'                                                                                                                                                   |
| 'fadeOutUpBig'                                                                                                                                                |
| 'flipInX'                                                                                                                                                     |
| 'flipInY'                                                                                                                                                     |
| 'flipOutX'                                                                                                                                                    |
| 'flipOutY'                                                                                                                                                    |
| 'lightSpeedIn'                                                                                                                                                |
| 'lightSpeedOut'                                                                                                                                               |
| 'rotateIn'                                                                                                                                                    |
| 'rotateInDownLeft'                                                                                                                                            |
| 'rotateInDownRight'                                                                                                                                           |
| 'rotateInUpLeft'                                                                                                                                              |
| 'rotateInUpRight'                                                                                                                                             |
| 'rotateOut'                                                                                                                                                   |
| 'rotateOutDownLeft'                                                                                                                                           |
| 'rotateOutDownRight'                                                                                                                                          |
| 'rotateOutUpLeft'                                                                                                                                             |
| 'rotateOutUpRight'                                                                                                                                            |
| 'hinge'                                                                                                                                                       |
| 'jackInTheBox'                                                                                                                                                |
| 'rollIn'                                                                                                                                                      |
| 'rollOut'                                                                                                                                                     |
| 'zoomIn'                                                                                                                                                      |
| 'zoomInDown'                                                                                                                                                  |
| 'zoomInLeft'                                                                                                                                                  |
| 'zoomInRight'                                                                                                                                                 |
| 'zoomInUp'                                                                                                                                                    |
| 'zoomOut'                                                                                                                                                     |
| 'zoomOutDown'                                                                                                                                                 |
| 'zoomOutLeft'                                                                                                                                                 |
| 'zoomOutRight'                                                                                                                                                |
| 'zoomOutUp'                                                                                                                                                   |
| 'slideInDown'                                                                                                                                                 |
| 'slideInLeft'                                                                                                                                                 |
| 'slideInRight'                                                                                                                                                |
| 'slideInUp'                                                                                                                                                   |
| 'slideOutDown'                                                                                                                                                |
| 'slideOutLeft'                                                                                                                                                |
| 'slideOutRight'                                                                                                                                               |
| 'slideOutUp'                                                                                                                                                  |
| others values of [Animate.css](https://animate.style/) can be passed but is not guaranteed if they will work properly depending of `mode` prop value you use. |
| ## Customization                                                                                                                                              |

The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps:

`In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).`

Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically.

| CSS Handles |
| ----------- |
| `hide`      |
| `show`      |
| `container` |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/scroll-animate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.