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.
data-reveal
String | null
Does not require a value.
data-reveal-scrub
Boolean
Enable scrubbing.
data-reveal-distance
CSS Value
200px, 75%, 33vh.
data-reveal-degrees
Number
90, -45, 312.
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-play
attribute.
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
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:
Select the Container or Section that wraps the animated content.
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?