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:

Class

Description

.reveal-fade

Element fades in

.reveal-from-top

Element fades in from top to bottom

.reveal-from-bottom

Element fades in from bottom to top

.reveal-from-left

Element fades in from left to right

.reveal-from-right

Element fades in from right to left

.reveal-scale-up

Element fades in while scaling up

.reveal-scale-down

Element fades in while scaling down

.reveal-rotate-from-left

Element fades in while rotating anticlockwise along Y axis

.reveal-rotate-from-right

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>
</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.