How does animation work?

In Slidea, 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 and fades out. Sounds complicated? Don’t worry, it’s so much easier than it sounds.

Keep in mind that we can use the animation markup any slidea component: slides, layers and objects. We’ll use an object for our example. As we’ve learned already, any element with the slidea-object class can be animated easily.

<!-- Object -->
<div class="slidea-object"></div>

The initial animation state

Using the data-slidea (or data-slidea-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.

<!-- Object -->
<div class="slidea-object"
     data-slidea="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 slidea. The in state is the default state of the object, to which the animation will transition from the initial state. Slidea 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, Slidea will know that the in state needs to be scale 1, opacity 1. You can override the in state using the data-slidea-in attribute.

Setting the animation start 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-slidea-start attribute which specifies when the in state should be triggered.

<!-- Object -->
<div class="slidea-object"
     data-slidea="scale 2, opacity 0"
     data-slidea-start="1000">
</div>

By default, Slidea will set the start time to when the background has finished it’s in transition, to allow the background to animate first. Let’s see how this would look like on our animated object.

Keyframed animation states

We can set a state at a certain moment in time using the data-slidea-at{time} attribute, where time is the state time set in milliseconds. For example, data-slidea-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 and fade out.

<!-- Object -->
<div class="slidea-object"
     data-slidea="scale 2, opacity 0, easing easeInOutQuad, duration 1000"
     data-slidea-at2500="rotationZ 360, duration 1000"
     data-slidea-at4000="scale 0, opacity 0"
     data-slidea-start="1000">
</div>

The out animation state

To set an exiting animation for our slides we use the data-slidea-out attribute, where the out time is equal to the slide delay.

Here’s how a slide would look like with an in and out animation:

<!-- Slide -->
<div class="slidea-slide"
     data-slidea="scale 2, opacity 0, duration 1000"
     data-slidea-out="rotationX 180, duration 500">

    <!-- Background -->
    <img class="slidea-background" src="assets/img/slide-1.jpg" alt="Slidea"/>
</div>

Creating loop animations

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

<!-- Slide -->
<div class="slidea-slide"
     data-slidea="scale 2, opacity 0, duration 1000"
     data-slidea-at1000="rotationX 20, duration 500"
     data-slidea-start="0"
     data-slidea-loop="true">

    <!-- Background -->
    <img class="slidea-background" src="assets/img/slide-1.jpg" alt="Slidea"/>
</div>