🔥 Black Friday Sale - Get all templates for just $59 🔥

Reveal animations

Cruip CSS

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>

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.

Last updated on August 17, 2021