Scroll Animate

📢 Use this project, contribute to it or open issues to help evolve it using 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.

`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 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

PreviousContainer NextImage Flip List

Last updated 2 years ago

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.

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 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

Scroll Animate

scroll-animate props

Scroll Animate

scroll-animate props

`scroll-animate` props

`scroll-animate` props