Help with on scroll expand of clip path

Ask the community
, , ,
1

I am having trouble with clip paths / reveals.

I want to do an expanding circlular reveal of the background text and images on scroll, i.e as the user scrolls down the circle in the section gets bigger and bigger until it reveals the complete section.

I have tried uploading a svg with a transparent hole and then using the on Scroll expand but its limited to 400% growth, so if the circle start very small and the the screen is all black the 400% growth doesnt allow the cirlce to grow enogh show the entire width of the page.

I have also used Css on a transparent container but again cant control it via code or css on scroll to make it bigger as i dont believe you can pass values to CSS and again the make effect is 400%

The idea came from here, big white circle on the section just below the fold

which is built on Wix and has an intresting line in the css.

animation style( clip-path: circle()} which leads me to believe i am missing something

Any tips or tricks

2

the trick for this is to add a container to the second section and stretch it.

then add a scroll animation - shape - to this container. Animation type In.

Then adjust intensity to suit.

Set the animation arae to finish at around the 50%

3

So have a container with an expand on it, within that a shape with an expand on it :slight_smile:

Tested and working

The edge of the circle can get a little ragged but i will play on, thank you

4

not expand. set the containers animation to shape on scroll. That way you can add any elemnt to the container so its visible on scroll. In the editor you see the final view. sort of like this quick example.

Screenshot 2025-07-18 092348
Screenshot 2025-07-18 0923482257×1089 178 KB

1 Like