RevealJs-Animated

by @rogeralmeidacom

A extension to use web-animations inside RevealJs presentations

Install the plugin locally

									
										npm install revealjs-animated

How to use it

Add the plugin to RevealJs

									
										//index.html
										Reveal.initialize({
										  // Other configurations
										  dependencies: [
										    // Other plugins
										    {src: 'node_modules/revealjs-animated/dist/revealjs-animated.js',
										    async: true}
										  ]
										});

How to use it

Add properties to the elements you want to animate

									
										<h1
											class="fragment animated move-to-middle-top"  
											data-animated-duration="1000" 
											data-animated-iterations="1" 
											data-animated-fill="forwards">
											Animated Title
										</h1>

Have Fun!

Middle Top

							
								<h1 id="titulo" class="fragment animated move-to-middle-top">Middle Top</h1>

Middle Top

							
								<h1 id="titulo" class="fragment animated move-to-middle-top"  data-animated-duration="100">Middle Top</h1>

Move to specific positions

Default Parameters

							
								<p class="fragment animated move-to">Default Parameters</p>

Move to specific positions

One Item

							
								<p class="fragment animated move-to" data-animated-move-to-left="-50%" data-animated-move-to-top="300px" data-animated-duration="3000">One Item</p>

Move to specific positions

Second Item

							
								<p class="fragment animated move-to" data-animated-move-to-left="100px" data-animated-move-to-top="29px" data-animated-duration="1000" data-animated-iterations="1" data-animated-fill="forwards">Second Item</p>

Scale Up

Let me Grow!

							
								<p class="fragment animated scale-up">Let me Grow!</p>

Scale Up

I'm a giant!

							
								<p class="fragment animated scale-up" data-animated-scale-up-to="4">I'm a giant!</p>

Scale Down

Let me Shrink!

							
								<p class="fragment animated scale-down">Let me Shrink!</p>

Scale Down

Let me Shrink!

							
								<p class="fragment animated scale-down" data-animated-iterations="3">Let me Shrink!</p>

Rotate

							
								<p class="fragment animated rotate">Rotate</p>

Combos

Combo

Twist to Top

							
								<p class="fragment animated move-to-middle-top rotate">Twist to Top</p>

Animations in serie

							
								<div class="fragment animated scale-up">
									<div class="fragment animated rotate">
										Animations in serie
									</div>
								</div>