Scroll Animate
Last updated
Last updated
📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.
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
propsscrollTopDistance
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:
'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.
hide
show
container