Animation and effects¶
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:
The class`animate__animated` will be automatically added as soon as an animation class is present.
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.
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.
For performance reasons it is suggested to use just one scroll animation library at a time.
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
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.
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
data-josh-anim-name="pulse" data-josh-duration="1500ms" data-josh-delay="3.5s" data-josh-iteration="5"