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, 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"