Reveal
Animate components as they enter or leave the viewport
The Reveal component animates its child content in response to scrolling. Choose a fade, slide, zoom, light-speed, or rotation effect, then control when and how the animation plays.
How to Use Reveal
You’ll find Reveal under Animation in the Components list.
Drag Reveal onto the page.
Place the component you want to animate inside it.
Choose Smooth or Scrub mode.
Select the animation, direction, and trigger points.
Set timing values and preview the page while scrolling.
Component Settings
Reveal
Mode
Smooth — Plays the animation after its trigger is reached. This is the default.
Scrub — Links animation progress to the page’s scroll position between Start and End.
Animation offers Fade, Slide, Zoom, Light Speed, or Rotate. Fade is the default.
Direction can be Up, Down, Left, or Right and defaults to Up.
Distance sets how far the content travels and defaults to 200px. Use any valid CSS length.
Degrees appears for Rotate and defaults to 90°.
Trigger
Play — When the animation runs. Once on Enter plays it the first time the content enters the viewport and never again; Always on Enter replays it each time the content scrolls into view from below; Enter and Exit (the default) also plays a matching exit animation when the content leaves, and replays on re-entry in either direction.
Start / End — Where the animation is triggered, measured against the top edge of the Reveal content: Entering Screen as it reaches the bottom of the viewport, Middle of Screen as it reaches the centre, and Exiting Screen as it reaches the top. Start defaults to Entering Screen; End defaults to Exiting Screen. In Scrub mode the animation progresses between the Start and End positions.
Timing
Easing — Offers Linear, Power0–Power4, Sine, Circ, Expo, Back, Elastic, or Bounce. The default is Power1.
Duration — Available in Smooth mode and defaults to 500 milliseconds.
Delay — Available in Smooth mode and defaults to 0 milliseconds.
Markers displays the Start and End trigger positions for debugging. It is off by default; disable it before publishing.
Flexbox and Grid
Set the Reveal component to act as a Grid Item or Flex Item when its parent layout needs explicit span, order, alignment, or sizing controls.
Accessibility
Keep movement subtle and never make the animation the only way to discover essential content. Check that the page remains understandable when the visitor prefers reduced motion.
Troubleshooting
The page scrolls horizontally on iPhone
A Reveal animation can temporarily extend beyond the viewport. Select the parent Container and set Layout → Overflow to Hidden so the animated content is clipped to the section.
Content inside Reveal is not centred
Reveal is a block-level wrapper, so an Auto width fills the available width rather than shrinking to fit its content, and a fixed-width child sits at the wrapper’s left edge. Enable the child’s Spacing and set its left and right margins to Auto, or give the Reveal itself a Theme Spacing width matching the content plus Auto left and right margins.
Related Components
3D Transform — Creates hover and pointer-driven depth effects.
Container — Wraps and clips Reveal animations.
Link to a page, resource, anchor, email address, or website.
Control positioning, stacking, visibility, overflow, and isolation.
Set width, height, and responsive size constraints.
Add responsive margin and padding.
Control fonts, text spacing, decoration, colour, and semantic wrappers.
Apply colour, image, gradient, SVG, video, and hover backgrounds.
Choose what animates and set its timing curve, duration, and delay.
Apply shadows, opacity, and hover effects.
Apply blur, brightness, saturation, shadow, and backdrop effects.
Scale, rotate, move, and skew components.
Set border style, colour, opacity, width, radius, and hover states.
Add CSS classes and IDs, or change supported HTML tags.
Last updated
Was this helpful?