Introducing Objects

As we’ve mentioned already, slidea can animate any of the HTML content inside of it. To tell slidea to animate a certain part of our slide, we need to mark it up as an Object. Any element inside a slide can be animated by adding the class slidea-object to it.

Woohoo!

Animating using objects is simpler than ever!

So I just add the class and I can animate things?

Yes, it’s that simple! Once you’ve added the slidea-object class, you can animate anything inside the slide which wasn’t animated before.

<!-- Slidea -->
<div class="slidea">
  <!-- First Slide -->
  <div class="slidea-slide">

    <!-- Content -->
    <div class="slidea-content slidea-content-top">
      <div class="slidea-content-container text-white text-center">
        <h2 class="slidea-object" data-slidea="tada, duration 2000">
          Woohoo!
        </h2>
        <p class="slidea-object" data-slidea="y 200">
          Animating using objects is simpler than ever!
        </p>
      </div>
    </div>

    <!-- Background -->
    <!-- To change the background, modify the src=".." attribute -->
    <img class="slidea-background" src="assets/img/slide-1.jpg">
  </div>
</div>

This is nice, where was the list of animations again?

We use the data-slidea attribute to set an initial animation. You can read more about animations in the animation presets and keyframed custom animations guides.