Animate icon
Module Id
animate
Group Id
org.jahia.modules
Updated
Requires Jahia
8.0.0.0
Author
pvollenweider
Category
Tools and Utilities
Status
COMMUNITY info

Animate group_work

animation css focus

This module allows adding water CSS animations from the layout tab. The user can choose around 76 different animations, and can also change the startup delay and the duration.

It uses the animate.css from https://daneden.github.io/animate.css and also  https://github.com/bas2k/jquery.appear to start the animation on the viewport.

 

Dependencies & Dependants

Dependencies
  • NONE

Changelog 1.8.2

Update definition to be able to animate every content

FAQ

Is there a way to start an animation after a few seconds?

Yes! You can set a delay value in seconds. Then there is another property to set, to tell the system how to use the delay. You can choose the "Wait before starting the animation" or the "Wait before displaying the component" value. 

What are the differences between the "How to use delay" property?

Use the "Wait before starting the animation" if you want to display your content, and then, after the chosen delay, play your animation. This is very useful for the end user to add some focus to a component such a button if you choose an attention seeker such the pulse or the bounce effect. You can also use this type of delay for exit effects such a fade out.

Use the "Wait before displaying the component" if you want to hide the content before an entrance such a fading entrance or bouncing entrance effect.

Where can I see all existing effects

Please consult the dedicated page https://daneden.github.io/animate.css/

How To Install

Once the module is installed and enabled into your web project, you can access this tool from any dropable component under the "Layout" tab. Then click the "Add animation" checkbox and choose your animation.

You can leave the delay and the duration as default or set a value (in second, for instance, 2 for 2s or 0.3 for 300ms). For the delay, you can choose between two behaviors: the time to wait before the animation starts, or the time to wait before displaying the component.

You can also pick an Iteration value if you want to replay the animation.

Please check all the different animation on https://daneden.github.io/animate.css/

Images

Video

License

The module license is a GPL OR JSEL

The embedded animate.css and jQuery.appear are licensed under the MIT license