Animation and effects

Animation

Content elements can easily be animated by adding animation classes to the field Additional classes found in the Appearance register. Animations are provided by animate.css and the available animation classes can be obtained from the demo site.

Example: To apply a bouncing effect the following classes could be used: animate__bounce.

Note

The class`animate__animated` will be automatically added as soon as an animation class is present.

Scroll animation

The scroll animation feature allows to call further attention to content elements while the user is scrolling on the page. Typically content elements are moved in from the side of the page, faded up, zoomed in or flipped.

A scroll animation can be assigned to a content element by either selecting one of the predefined animations found in the "Behaviour" section or by assigning data attributes to the "Additional attributes" field in the "Appearance" tab from the content element properties dialog.

They can be further customized by help of the constant editor.

Currently the libraries Twikito/onscroll-effect, Josh.js and AOS are supported.

Warning

AOS didn't get updated for quite some time. This is why it has been marked as deprecated hence shouldn't be used for new projects any more.

Hint

For performance reasons it is suggested to use just one scroll animation library at a time.

Twikito/onscroll-effect

With the js library Twikito/onscroll-effect any number of css classes can be added to an element hence any third party animation classes can be used. To use with Animate.css just add the animation class a data-scroll attribute:

data-scroll="animate__pulse"

Hint

The class animate__animated will be automatically added upon detecting an Animate.css animation class.

The library supports other options to further define the behaviour. The details can be found on its documentation page.

Josh.js

The js library Josh.js can be used to animate content elements with the css library Animate.css. To add a scroll animation the related attributes can be added to the field Additional attributes. The available data attributes can be looked up at github.

Example:

data-josh-anim-name="pulse" data-josh-duration="1500ms" data-josh-delay="3.5s"
data-josh-iteration="5"

Reveal footer

An interesting feature is the footer to be revealed when scrolling down. The user gets the impression like the content area forms a curtain being lifted from the footer while scrolling to the end of the page.

To use this effect the constant "Reveal footer" can be set in the constant editor. The constant can be found in the category "PIZPALUE: CUSTOMER BASE".