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 classanimate__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, and Josh.js are supported.

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"