Animate for reveal.js

A plugin for animating SVG graphics and HTML elements

Created by Thomas Endres

The idea

Animating HTML

With reveal animate, you can animate arbitrary HTML content.

Switching to the next slide will animate the next element.

You can also modify multiple elements in one step.

Animating SVG

Getting started (1)

Within your HTML code, load the necessary dependencies
The following JavaScript libraries need to be loaded:

<script src="js/jquery.js"></script>
<script src="js/jquery.browser.js"></script>
<script src="js/jquery.svg.js"></script>
<script src="js/jquery.svganim.js"></script>
<script src="js/sylvester.js"></script>

Getting started (2)

Copy the code in 'plugin/animate'
Register the plugin (see code below):
- Using an SVG animation provider
- Using an HTML animation provider

{ src: 'plugin/animate/reveal.animate.js', async: true, callback: function() {
    Reveal.Animate({
        animationProviders: {
            'animated-svg': Reveal.Animate.Svg(),
            'animated-html': Reveal.Animate.Html()
        }
    });
} }

Getting started - Quick animations

For quick animations, you'll also have to register the 'normal' animation plugin
Register the quick animation plugin before the animation plugin (see code below)
Choose the animation duration (see option given to the animation transformer)

{ src: 'plugin/animate/reveal.quickanim.js', async: false, callback: function() {
    var quickAnimationsTransformer = Reveal.QuickAnimationTransformer({
        duration: 500
    });
    quickAnimationsTransformer.transform();
} },

Animation HTML elements

Set an animation duration
Set the ID of the element to be animated
Set the property to be animated
Set the target value

<animation duration="500">
  <animate data-id="element-to-be-animated" data-property="opacity" data-value="1">
  </animate>
</animation>

Animate HTML

Create a container for the elements to be animated
Set the container class to 'animated-html'
Put the elements to be animated within the container
Create animation HTML elements within the container

<div class="animated-html" style="overflow: hidden;">
  <animation duration="500">
    <animate data-id="element-to-be-animated" data-property="opacity" data-value="1">
    </animate>
  </animation>
  <div id="element-to-be-animated" style="opacity: 0;">
    Element to be animated
  </div>
</div>

Quick HTML animations

Quick animations are an alternative to fragmented slides

Add a number attribute 'data-animation-index' to the element to be animated
The element will not be shown when the slide becomes visible
All elements containing the data-animation-index attribute will be shown in the order of the animation index

<div data-animation-index="1">
  Element to be shown first
</div>
<div data-animation-index="2">
  Element to be shown second
</div>

Animate SVG

Create a container for the elements to be animated
Set the container class to 'animated-svg' and 'svg'
Set the container 'src' attribute to the image path
Create animation HTML elements within the container

<div class="animated-svg svg" src="img/image.svg">
  <animation duration="500">
    <animate data-id="element-to-be-animated" data-property="opacity" data-value="1">
    </animate>
  </animation>
</div>

How does it work?

The animation keyframes are determined when loading the animation
When pressing Space (or some other key) on the keyboard, the plugin looks for these keyframes
If the slide should be animated, the plugin calculates the animation steps needed
Then, the animation is issued:
- Using the jQuery animation component for HTML animations
- Using the jQuery SVG plugin for SVG animations

Limitations

Multiple animation sections per slide are not yet supported
You cannot mix SVG and HTML animations by now
You cannot mix 'normal' HTML animations and quick animations