What are Imagine Elements?

Imagine can animate any HTML content. To tell imagine to animate a certain part of our page, we need to mark it up as an imagine element. Any element inside your page can be animated by adding the class imagine to it.

How do I animate an element?

Make sure you’ve followed the previous Getting Started articles before you continue.

Animating elements is simple:

1. Add the imagine class to your element.
2. Set the animation using the data-imagine attribute.
3. Initialize imagine for the chosen element.

Let’s take the example above.

After adding the class, you’re ready to animate!

Yes, it’s that simple! Once you’ve added the imagine class, you can animate anything that wasn’t animated before.

<div class="imagine" data-imagine="rotationY 0.5, rotationZ 0.5, scale 0.5">
  <h1>Hello imagine!</h1>
  <p>Animating page elements is simpler than ever.</p>
</div>

You can see we’re using the data-imagine attribute to set the element’s animation. You can read more about animations in the custom animations guides.

Imagine will process the animation from the attribute we’ve set. All that’s left after adding the data-imagine attribute is to initialize imagine using javascript.

$('.imagine').imagine()

That’s it! This way, you can apply imagine to anything in your page. Simple, hassle free, anywhere in your page.

Alternatively, specify animation when initializing

We can also set the animation using our initialization script. Choosing this way, you do not need to set the animation using the data-imagine attribute.

$('.imagine').imagine({
  animation: "rotationY 0.5, rotationZ 0.5, scale 0.5"
})