Animations
The shopping experience animations are triggered when the page is scrolled by the user.
The animation classes are inserted into the CSS classes (2) field of the block (1) in the layout settings.
Example:
zen-animate slide-in-blurred-bottom
The animations are triggered when the element moves into the viewing area of the so-called viewport by scrolling.
Scroll-Animation
To initiate an animation add the class zen-animate in conjunction with any of the following pre-made animation classes:
fade-infade-in-topfade-in-bottomfade-in-fwdslide-in-topslide-in-rightslide-in-bottomslide-in-leftslide-in-blurred-topslide-in-bck-centerslide-in-blurred-bottompopularpuff-in-centerflip-in-hor-topflip-in-hor-bottomswing-in-bottom-fwdbounce-in-bottomscale-in-center
Scroll-Overlay / Parallax Animation
To initiate an animation add the class zen-scroll-overlay .
Example:
Last updated
Was this helpful?