Background Reveal

How to use Background Reveal Extension of Sky Addons for Elementor

Sky Addons Background Reveal is a scroll-driven Elementor extension that starts a container’s background as a centered, rounded band and reveals it edge-to-edge as the container scrolls up through the viewport. The corner radius morphs from a start value to an end value across the same range, giving you the premium full-bleed “expand into view” effect seen on high-end agency sites. Because the Background Reveal extension animates a clip-path rather than the box itself, the container, its layout, and its content never move — no reflow, no jitter. The reveal is powered by GSAP and ScrollTrigger, scrubbed to the scroll and reversing cleanly on scroll-up, all configured visually with no custom code. This documentation will guide you through enabling and configuring the Background Reveal extension on your website.

Features:

1. Scroll-scrubbed reveal that expands from a centered band to full width
2. Adjustable start width so you control how constrained the background begins
3. Corner radius that morphs from a start radius to an end radius during the reveal
4. Clip-path based animation — the box, layout, and content never shift or reflow
5. Smoothness control that adds a soft scrub catch-up lag behind the scroll
6. Reverses cleanly on scroll-up, with toggles for tablet and mobile

Enable the Background Reveal Extension

Background Reveal ships with Sky Addons as an extension you switch on from the dashboard. To confirm it is active:

1. Navigate to your WordPress Dashboard and locate “Sky Addons” in the left sidebar menu
2. Click on the “Extensions” (Modules) tab within the Sky Addons dashboard
3. Find “Background Reveal” in the extensions list
4. Ensure the toggle switch is in the “On” position
5. Save your changes if you made any adjustments

Once enabled, the controls appear on Containers only. Select a Container in the Elementor Editor, open the Style tab, and find the Background Reveal section (marked with the Sky Addons icon) right after the Background section.

Background Reveal Controls

The Background Reveal section is built for a full-width Container with content boxed inside. Only the background is revealed — content never moves. The effect runs on the front end; the editor shows the final expanded state.

1. Enable – Activates the background reveal animation on the selected container
2. Start Width – Width of the background band before the reveal (30%–100%, default 75%). It expands to full width as you scroll; keep this wider than your content so nothing is clipped
3. Start Radius – Corner radius while the background is constrained (0–100px, default 24px). It morphs toward the End Radius as the band expands
4. End Radius – Corner radius once the background is fully expanded (0–100px, default 0). Use 0 for a sharp full-bleed edge
5. Smoothness – Scrub catch-up lag in seconds (0–2, default 0.6). Higher values let the reveal glide behind the scroll for a softer feel; 0 locks it to the scroll
6. Disable on Tablet – Turns the effect off at the tablet breakpoint (default off)
7. Disable on Mobile – Turns the effect off at the mobile breakpoint (default on)

Save and Preview

1. Once configured, click “Publish” or “Update” to save your changes.
2. Preview the page and scroll the container through the viewport — the reveal will not scrub inside the editor.

Best Practices

1. Apply it to a full-width Container with a distinct background, keeping content boxed in an inner container so nothing gets clipped.
2. Keep Start Width (70%–85%) wider than your inner content for a comfortable margin.
3. Pair a rounded Start Radius with a 0 End Radius for a “rounded card expands into a full-bleed band” transition.
4. Use a small Smoothness (0.4–0.8) for an elegant glide; set it to 0 to lock the reveal to the scroll.
5. Leave Disable on Mobile on for most designs, since narrow screens suit a width-based reveal poorly.

Troubleshooting

1. Reveal Not Animating in the Editor: This is expected — the effect is front-end only. Preview the published page and scroll the container into view to see the reveal scrub.
2. Content Gets Clipped: Your Start Width is narrower than the inner content. Increase Start Width, or box your content in a narrower inner container so it sits within the starting band.
3. No Effect on Smaller Screens: Disable on Mobile is on by default, so the reveal will not run at the mobile breakpoint until you turn it off. Check the tablet switch too.
4. Section Missing: Background Reveal is container-level. Confirm you selected a Container (not a widget or legacy section) and that the extension is enabled.

Frequently Asked Questions

Why can’t I see the reveal animation while editing?

The Background Reveal extension runs only on the front end. The editor shows the final, expanded state so your layout stays predictable — preview the page to watch the scroll-scrubbed reveal.

Does the reveal cause the page to jump or reflow?

No. The effect animates a clip-path over the background, so the container, its layout, and its content stay perfectly still — no reflow, no jitter. Only the visible background band expands.

How do I round the corners at the start and square them at the end?

Set a Start Radius (for example 24px) and an End Radius of 0. As the container scrolls up, the corner radius morphs from rounded to sharp alongside the width reveal, ending in a clean full-bleed edge.

Can I turn the Background Reveal off on phones?

Yes. Use the Disable on Mobile and Disable on Tablet switches. Disable on Mobile is on by default, so the reveal is skipped on phones unless you turn it back on.

Related Documentation

• Reveal Effects
• Simple Parallax
• Particles Effects

Conclusion

The Background Reveal extension by Sky Addons for Elementor turns an ordinary full-width container into a cinematic, scroll-driven reveal — no code and no layout shifts. Use it on hero bands and feature sections where a rounded card should expand into a bold full-bleed background as visitors scroll. If you have any questions, the Sky Addons support team is happy to help.