✨ Welcome Summer Sale! Get all templates for $79 (40% Off) ✨
Cruip CSS

Reveal animations

Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

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:

ClassDescription
.reveal-fadeElement fades in
.reveal-from-topElement fades in from top to bottom
.reveal-from-bottomElement fades in from bottom to top
.reveal-from-leftElement fades in from left to right
.reveal-from-rightElement fades in from right to left
.reveal-scale-upElement fades in while scaling up
.reveal-scale-downElement fades in while scaling down
.reveal-rotate-from-leftElement fades in while rotating anticlockwise along Y axis
.reveal-rotate-from-rightElement 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.

Last updated on August 17, 2021