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

• fade-in-top

• fade-in-bottom

• fade-in-fwd

• slide-in-top

• slide-in-right

• slide-in-bottom

• slide-in-left

• slide-in-blurred-top

• slide-in-bck-center

• slide-in-blurred-bottom popular

• puff-in-center

• flip-in-hor-top

• flip-in-hor-bottom

• swing-in-bottom-fwd

• bounce-in-bottom

• scale-in-center

Scroll-Overlay / Parallax Animation

To initiate an animation add the class zen-scroll-overlay .

Example: