Neambo homepage
Contact UsMarketplace

Reveal animations

Reveal animations bring elements into view as you scroll down the page, guiding attention to each section and giving your page a polished feel.

Watch this quick YouTube video to learn how to add reveal classes.

Important notes!

  • Avoid adding reveal animations to above-the-fold elements. They can delay your LCP score and hurt your Core Web Vitals.

  • Known issue: Ghost style's blurred background may appear disabled during the animation due to the following browser limitation: https://drafts.fxtf.org/filter-effects-2/#backdrop-root

  • Elements that already have CSS transform or opacityapplied will have these styles overwritten according to the animation's end keyframe styles.

This is a core component available on all pages, which you can apply to any element that can have a custom class. You can add custom classes to most modules in Act3 in:

Wrapper › Identifiers › Custom class

Many modules include similar fields for specific elements, like link buttons, repeater items, and others. These work the same way.

You can also add classes to rich text elements in Advanced › Source code, like this:

<h1 class="reveal">Hello World!</h1>

Required class

To apply a scrolling animation to a module or element, add the required reveal class. This alone will apply the default scrolling animation and may be enough for most elements:

Animation

If you want to change the direction or type of animation, add one of the preset classes from the list below. For example, an element that should animate towards the right will have these classes applied:

reveal reveal--right

Here are all the available classes:

reveal--up
reveal--down
reveal--left
reveal--right
reveal--zoom

Rerun

By default, once an element has been revealed, it will stay that way even if you scroll away and return to it later. It will not animate again. If you want the animation to run every time the element appears in view again, you can add the reveal--rerun class to your element:

reveal reveal--up reveal--rerun

Duration

Specify a custom duration for the animation with a class like this: reveal--duration-400, where 400 is the duration in milliseconds (ms):

reveal reveal--up reveal--rerun reveal--duration-400

Delay

If you want the animation to delay for a moment (usually when you want elements in a group to appear one after the other), you can add a class like this: reveal--delay-300, where 300 is the delay in milliseconds (ms):

reveal reveal--up reveal--rerun reveal--delay-300

Timing

Apply an easing function to your animation with a class like: reveal--timing-ease-out, where ease-out can be replaced with your desired easing value:

reveal reveal--up reveal--timing-ease-in-out

Offset

By default, animations start as soon as the element enters the viewport. If you want the animation to start only after the element is further into view, use the reveal--offset-100 class, where 100 is the number of pixels into the viewport before the animation triggers. For example:

reveal reveal--up reveal--rerun reveal--offset-100