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.