Reveal

Animate components when they enters the viewport

The “Reveal” animation component in Elements allows you to add visually engaging animations to your website. As elements come into view, they can “reveal” themselves with smooth, dynamic effects.

Advanced Usage

By using the data-reveal-* attributes in your Custom Components, you can take advantage of the Animation framework built into Elements.

As a minimum you can add data-reveal to any DOM element to apply a default animation as the element enters the viewport. If you would like to customise the animation, the following data attributes are available.

Attribue
Type
Notes

data-reveal

String | null

Does not require a value.

data-reveal-scrub

Boolean

Enable scrubbing.

data-reveal-animation

String

data-reveal-exit-animation

String

data-reveal-distance

CSS Value

200px, 75%, 33vh.

data-reveal-degrees

Number

90, -45, 312.

data-reveal-play

String

data-reveal-start

String

data-reveal-end

String

data-reveal-easing

String

data-reveal-duration

Number

In seconds

data-reveal-delay

Number

In seconds

data-reveal-id

String

Optional ID, used to identify debug markers.

data-reveal-debug

Boolean

Enables debug markers

Available Play Methods

Elements allows you to define when the animation should be triggered. You can use any of these values when setting the data-reveal-playattribute.

Name
Value
Notes

Once on enter

enter-once

One time animation when first entering the viewport

Always on enter

enter-always

Plays every time the elements enters the viewport

Enter and exit

enter-exit

Plays every time the element enters and exits the viewport

Animations

Animations in Custom Components can be set independently on enter and exit, as shown in the sample code.

<div
    data-reveal
    data-reveal-animation="lightSpeedRightIn"
    data-reveal-exit-animation="fadeUpOut"
>

We offer five types of animations to enhance your user interface:

• Fade

• Slide

• Zoom

• Light Speed

• Rotate

Each animation supports all four directions (Up, Down, Left, Right) and can be triggered for both “In” and “Out” events.

Our animation naming convention is straightforward, following this structure:

{animationName}{Direction}{Event}

For example:

fadeUpIn for a fade-in effect moving upwards.

zoomLeftOut for a zoom-out effect moving to the left.

This flexible system ensures that you can seamlessly integrate animations tailored to your design needs.

Available Animations

Animation Name
Description

fadeUpIn

Fade Up and In

fadeUpOut

Fade Up and Out

fadeDownIn

...

fadeDownOut

fadeLeftIn

fadeLeftOut

fadeRightIn

fadeRightOut

slideUpIn

slideUpOut

slideDownIn

slideDownOut

slideLeftIn

slideLeftOut

slideRightIn

slideRightOut

zoomUpIn

zoomUpOut

zoomDownIn

zoomDownOut

zoomRightIn

zoomRightOut

zoomLeftIn

zoomLeftOut

lightSpeedLeftIn

lightSpeedLeftOut

lightSpeedRightIn

lightSpeedRightOut

lightSpeedUpIn

lightSpeedUpOut

lightSpeedDownIn

lightSpeedDownOut

rotateUpIn

rotateDownIn

rotateRightIn

rotateLeftIn

rotateUpOut

rotateDownOut

rotateRightOut

rotateLeftOut

Full Example

<div
    data-reveal
    data-reveal-scrub="false"
    data-reveal-animation="fadeUpIn"
    data-reveal-exit-animation="fadeUpOut"
    data-reveal-distance="200px"
    data-reveal-degrees="90"
    data-reveal-play="enter-exit"
    data-reveal-start="top bottom"
    data-reveal-end="top top" 
    data-reveal-easing="power1.out"
    data-reveal-duration="0.5"
    data-reveal-delay="0"
    data-reveal-id="optional-reveal-id"
    data-reveal-debug="false"
>

Helpful Tip: Fixing Horizontal Scroll on iPhone

If your site appears to shift sideways or introduces unexpected horizontal scrolling on mobile (especially iPhone), the issue may be caused by a Reveal component pushing the layout beyond the viewport.

This often happens when an animation or hidden content expands outside the container, triggering a wider layout than expected.

Set the parent Container that wraps the Reveal component(s) to overflow-hidden. This will prevent the hidden/revealed content from extending beyond the bounds of the viewport.

How to do it in Elements:

  1. Select the Container or Section that wraps the animated content.

  2. In the Inspector, set Overflow to Hidden.

This tells the browser to clip any content that exceeds the container’s boundaries fixing the horizontal scroll issue on iOS.

Last updated

Was this helpful?