How does animation work?

In reveal, each object has an animation timeline based on keyframes (or states). That means that we’re basically setting the animated element’s state at a certain moment of time.

For better understanding, we’re going to create an animated object which fades in and scales down, then rotates 360 degrees and then doubles its scale. When it exits the screen, we want it to simply fade out. Sounds complicated? Don’t worry, it’s so much easier than it sounds.

<div id="my-element"></div>

The initial animation state

Using the data-reveal (or data-reveal-initial) attribute, we set the initial state of our object. The initial state is how the object looks like before the animation starts and has no easing and no duration. As mentioned previously, we want our object to first scale down and fade in.

Because we’re setting the initial state, in order to scale the object down and fade it in, we must set the initial scale to be bigger than 1, and the opacity to 0.

<div id="my-element"
     data-reveal="scale 2, opacity 0">
</div>

When the object goes to its default state, it will scale down to 1 and fade to opacity 1.

The in animation state

The entering animation is a built-in animation in reveal. The in state is the default state of the object, to which the animation will transition from the initial state. reveal will compute the in animation based on your chosen initial state, so you do not have to set it yourself.

Considering that we have chosen scale 2, opacity 0 as an initial state, reveal will know that the in state needs to be scale 1, opacity 1. You can override the in state using the data-reveal-in attribute.

Setting the animation start-delay time

We might want layers or objects to start their animation at a later time during the animation. For that purpose we can use the data-reveal-start attribute which specifies when the in state should be triggered.

<!-- Object -->
<div id="my-element"
     data-reveal="scale 2, opacity 0"
     data-reveal-start-delay="1000">
</div>

Keyframed animation states

We can set a state at a certain moment in time using the data-reveal-at{time} attribute, where time is the state time set in milliseconds. For example, data-reveal-at2500 will set a new state at 2500 milliseconds (2.5 seconds) after the current slide timer started.

Let’s see how we can make the animation we’ve mentioned earlier using states. Let’s set our object to rotate 360 degrees on the z axis, then, after 1500 milliseconds, scale down.

<!-- Object -->
<div id="my-element"
     data-reveal="scale 2, opacity 0, easing easeInOutQuad, duration 1000"
     data-reveal-at2500="rotationZ 360, duration 1000"
     data-reveal-at4000="scale 0.5"
     data-reveal-start-delay="1000">
</div>

The out animation state

To set an exiting animation for our element we use the data-reveal-out attribute. The exit animation happens when the element goes out of view. This property only involves repeat animations.

Here’s how the element would look like with an in and out animation:

<div id="my-element"
     data-reveal="scale 2, opacity 0, easing easeInOutQuad, duration 1000"
     data-reveal-at2500="rotationZ 360, duration 1000"
     data-reveal-at4000="scale 0.5"
     data-reveal-out="rotationX 180, duration 500"
     data-reveal-start-delay="1000">
</div>

Setting the ending animation end-delay time

The end delay is the time to wait until animating the element to go out of view.

<div id="my-element"
     data-reveal="scale 2, opacity 0, easing easeInOutQuad, duration 1000"
     data-reveal-at2500="rotationZ 360, duration 1000"
     data-reveal-at4000="scale 0.5"
     data-reveal-out="rotationX 180, duration 500"
     data-reveal-start-delay="1000"
     data-reveal-end-delay="0">
</div>

Creating loop animations

We can set a looping animation by using the data-reveal-loop attribute. The loop will only involve the keyframed data-reveal-at{time} animation states.

<div data-reveal="scale 2, opacity 0, duration 1000"
     data-reveal-at1000="rotationX 20, duration 500"
     data-reveal-at2000="rotationX 180, duration 1500"
     data-reveal-start="0"
     data-reveal-loop="true">

Setting animations on repeat

We can set a repeating animation by using the data-reveal-repeat attribute. Repeating animations will redo the scroll reveal animation when the element comes back into view.

<div data-reveal="scale 2, opacity 0, duration 1000"
     data-reveal-repeat="true">

Javascript Version

Alternatively, you can write all of the above in a few lines of javascript. The animation parameter contains all of your states. The loop, repeat, and delay can also be set as normal parameters.

$('#my-element').reveal({
  animation: {
    initial: "scale 2, opacity 0, easing easeInOutQuad, duration 1000",
    2500: "rotationZ 360, duration 1000",
    4000: "scale 0.5",
    out: "rotationX 180, duration 500"
  },
  startDelay: 1000,
  endDelay: 0,
  loop: true,
  repeat: true
});