Reveal animations

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

Every template includes a set of animations that can be used to reveal elements as they enter the viewport. The following examples apply to HTML, React, and Vue templates.

To animate an element, add one of the available reveal effect classes to it:




Element fades in


Element fades in from top to bottom


Element fades in from bottom to top


Element fades in from left to right


Element fades in from right to left


Element fades in while scaling up


Element fades in while scaling down


Element fades in while rotating anticlockwise along Y axis


Element fades in while rotating clockwise along Y axis

Reveal offset

By default, elements will be revealed once 200px of itself entered the viewport. You can change it by adding a data-reveal-offset attribute to the revealing element and setting a different amount in px. For example, in the case you want the reveal animation triggering as soon es the element enter the viewport, do like in this example 👇

<div class="reveal-from-top" data-reveal-offset="0">Element</div>

Reveal delay

This is useful to create staggering animations for element placed in the same areas. For example 👇

<div class="reveal-from-top">Element 1</div>
<div class="reveal-from-top" data-reveal-delay="150">Element 1</div>
<div class="reveal-from-top" data-reveal-delay="300">Element 1</div>

Bind reveal triggering to a parent element

Let's say you have a set of revealing elements and you want them to start revealing as soon as its parent container enters the viewport... here is what you can do 👇

<div class="parent">
<div class="reveal-from-top" data-reveal-container=".parent">Element 1</div>
<div class="reveal-from-top" data-reveal-container=".parent" data-reveal-delay="150">Element 1</div>
<div class="reveal-from-top" data-reveal-container=".parent" data-reveal-delay="300">Element 1</div>

Adjust reveal offset and timing

Check the src/assets/scss/settings/base/_scroll-reveal.scss file if you want to change the default offset and timing values.

Other changes or integrations (for example, you want to add a new revealing effect) should be made into the src/assets/scss/settings/theme/_scroll-reveal.scss file.

Turn-off reveal animations

You can disable the reveal animations by removing the .has-animations class from the <body> tag.