Reveal.js-Animated

Integration of the animation library animate.css to reveal.js

We have 3 parameters to control the type of animation

1. animation: We select the animation that we want to apply.
2. speed: 5 animation speeds.
3. repeat: Number of repetitions.

Two configuration modes

• Global: It is defined when configuring reveal
• Local: It is defined in the html tag that we want to animate

Global Animation

Animation H1

'H1':{'animated':'backInDown'}

Animation H2

'H2':{'animated':'bounceIn', 'repeat':'repeat-3'}

'P':{'animated':'bounceIn', 'speed':'slower'}

'IMG':{'animated':'rotateIn', 'speed':'fast', 'repeat':'infinite'}

Local Animation

data-animated="backInLeft"

¡Ay, caramba!

1. data-animated="wobble"
2. data-repeat="repeat-2"
3. data-speed="fast"

¡Tequila!

1. data-animated="flip"
2. data-repeat="infinite"