What can I apply scroll reveal to?

Anything! You can apply Reveal on virtually any element in your page. Reveal will animate whatever you need when scrolling the page.

How do I animate an element?

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

Animating elements is simple:

1. Set the animation using the data-reveal attribute.
2. Initialize reveal for the chosen element.

Let’s take the example above.

<div data-reveal="bounceIn">
  <h1>Hello reveal!</h1>
  <p>Animating page elements is simpler than ever.</p>
</div>

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

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

$('[data-reveal]').reveal()

That’s it! This way, you can apply reveal 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-reveal attribute.

$('#my-element').reveal({
  animation: "opacity 0, rotationZ 30"
})