I need some help creating a custom scroll transition between two sections. I’ve previously used the built-in “Shape Transition” for a circle, but this time I need to do the exact same thing using a custom lightning bolt.
Here is exactly how the effect needs to work:
The user is scrolling down a yellow section.
As they transition to the next section, a red lightning bolt appears in the center.
As the user continues to scroll, the lightning bolt scales up/enlarges until the red completely fills the screen, transitioning the user fully into the red section.
What I have so far: I already have the lightning bolt as an SVG vector. I also have my red section built underneath it with the text ready to go. I’m just stuck on how to actually rig the scroll interaction so the vector scales up massively and reveals the section underneath it cleanly.
I’ve attached a mockup showing exactly how the animation should progress step-by-step from the yellow section, through the expanding bolt, to the final red section.
Does anyone know the best way to achieve this? Should I be using sticky positioning with a scale scroll animation, a cutout mask, or something else entirely?
Any advice, methods, or links to tutorials would be hugely appreciated. Thanks!
Studio’s built-in scroll animations (Inspector > Animations and Effects > Scroll) do have a Scale option, but they’re designed for smaller transforms — not the massive SVG expansion you’re describing where the shape fills the entire viewport.
For a lightning bolt that scales from center-screen to full-bleed as you scroll, you’ll need Velo to drive the transform based on scroll position. The built-in animations won’t give you the granular control or the scale range this effect demands.
Approach: sticky positioning + Velo transform control. Set the SVG to position: sticky with a calculated top value that keeps it centered during the transition zone. Then use code on the page to read scroll position and apply a CSS transform scale. You’d calculate the scale factor based on how far through the transition zone the user has scrolled — for example, scale(1) at the start of your yellow section, scale(50) or higher by the time the red section is fully in view.
The red content sits underneath in normal flow. Once the SVG is scaled large enough, it visually masks the yellow and reveals the red beneath it, which is already there.
Studio doesn’t expose a scroll event handler in Velo’s public APIs, so you’d poll scroll position with requestAnimationFrame for smooth updates. Check window.scrollY or use getBoundingClientRect on a reference element to know your progress through the transition.
Shape Transition (the feature you mentioned) is a preset for simple shapes and doesn’t support custom SVGs with this level of control — that’s why you’re building it manually.
If the SVG needs to stay visually above the red section as a mask (rather than just scaling in front of it), you might use mix-blend-mode or a CSS clip-path, but test those — blend modes and advanced CSS can behave inconsistently in the Wix rendering engine.
