Reveal Container wraps images, text, videos or whole layouts and reveals them as the visitor scrolls. It animates your real content, so links, buttons, videos and forms keep working. Choose from six effects and set exactly where on screen the animation starts and ends.
Every image and the large statement below sits inside a Reveal Container using the Blinds effect. Scroll back up to reverse it.
Wrap it, pick an effect and set the timing.
Add Reveal Container and put an image, a heading, a video or a group of elements inside it.
Choose Blinds, Tiles, Slice Shift, Curtain, Focus Reveal or Frame Expand, then choose to reveal, conceal, animate out, or both.
Use Start and Finish to set where on screen the animation plays. It is tied to scroll, so scrolling back reverses it.
Six effects and precise scroll timing.
Blinds, Tiles, Slice Shift, Curtain, Focus Reveal and Frame Expand.
Reveal on scroll, conceal on scroll, animate out as you scroll past, or reveal in and then animate out.
Set 2 to 64 strips, or a grid of 2 to 16 tile columns and rows, with vertical or horizontal strips.
Run strips first to last, last to first or centre out, with a stagger from 0 to 90%.
Add a zoom of up to 50% during the reveal, or a blur amount for Focus Reveal.
Set Start and Finish as a percentage of the screen height, plus separate exit timing.
Smooth the animation over up to 3 seconds so it does not jump with the scroll wheel.
Your real elements are animated, not a copy, so they stay clickable and editable.
Content shows without animation when a visitor prefers reduced motion or tabs into it with the keyboard.
Keep the animation on phones, or show the content without animation at 767px and below.
In the editor, show full content, follow scroll, or preview a fixed point in the animation.
Set the width, corner radius and the colour behind the content.
Anywhere a section deserves a moment of attention.
Reveal a large image as the page opens, or animate it out as visitors scroll on.
Bring in each feature image as the visitor reaches it.
Give each project image its own reveal.
Add pace to long articles and case studies.
Reveal a key line of text across the full width.
Reveal a video block that stays playable during the animation.
This is the full list of settings in the Breakdance editor, with their default values. Some only appear for certain effects.
| Control | What it does | Default |
|---|---|---|
| Reveal Effect | ||
| Effect | Blinds, Tiles, Slice Shift, Curtain, Focus Reveal or Frame Expand. | Blinds |
| Behaviour | Reveal on scroll, Conceal on scroll, Animate out as you scroll past, or Reveal in then animate out. | Reveal on scroll |
| Strips | Vertical or horizontal blinds. Blinds, Slice Shift and Curtain. | Vertical |
| Sequence | First to last, last to first, or centre out. Blinds, Tiles and Slice Shift. | First to last |
| Number of Strips | 2 to 64. Blinds and Slice Shift. | 24 |
| Stagger (%) | Delay between strips or tiles, 0 to 90. | 55 |
| Tile Columns / Rows | 2 to 16 each. Tiles only. | — |
| Slice Offset (%) | How far slices shift. Slice Shift only. | — |
| Blur Amount (px) | 0 to 60. Focus Reveal only. | — |
| Initial Frame Size (%) / Radius (px) | Starting size and corner radius. Frame Expand only. | — |
| Zoom (%) | Zoom applied during the reveal, 0 to 50. | 12 |
| Scroll Smoothing (seconds) | 0 to 3. | 0.8 |
| Start at Viewport (%) | Where the container top must be for the animation to start. 100 is the bottom of the screen. | 100 |
| Finish at Viewport (%) | Where the animation finishes. | 10 |
| Exit Starts / Exit Finishes (%) | Timing for the animate out behaviours. | — |
| Mobile | Animate, or show content without animation. | Animate |
| Builder Preview | Show full content, follow scroll, or fixed progress. | Show full content |
| Preview Progress (%) | The point shown when using fixed progress. | 50 |
| Frame | ||
| Width | Width of the container. Responsive. | — |
| Corner Radius | Rounded corners. Responsive. | — |
| Background Behind Content | Colour shown behind the content while it animates. | — |
Yes. It animates your real elements, not a copy, so links, buttons, videos and forms keep working.
The animation is tied to scroll position, so scrolling back reverses it.
Choose Animate out as you scroll past. The content starts fully visible and animates away as the visitor scrolls down.
If a visitor has reduced motion turned on, or moves keyboard focus inside the container, the content is shown without animation.
Yes. Set Mobile to Show content without animation and it will not animate at 767px wide and below.
No. The default builder preview shows the full content, so you can edit it normally. Switch to Follow scroll or Fixed progress to check the effect.
Reveal Container is included with Phox Elements, along with 150+ other premium elements for Breakdance.
