Animations

The shopping experience animations are triggered when the page is scrolled by the user.

The animations are triggered when the element moves into the viewing area of the so-called viewport by scrolling.

To initiate an animation select a block (1) and 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

The animation classes are inserted into the CSS classes (2) field of the block in the layout settings.

Example:

zen-animate slide-in-bottom