# Help with on scroll expand of clip path

**URL:** <https://forum.wixstudio.com/t/help-with-on-scroll-expand-of-clip-path/72170>\
**Category:** Ask the community\
**Tags:** question, code, wix-studio, design\
**Created:** [July 17, 2025, 8:03pm UTC](https://forum.wixstudio.com/t/help-with-on-scroll-expand-of-clip-path/72170 "2025-07-17T20:03:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tom66859](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@tom66859](https://forum.wixstudio.com/u/tom66859)\
**Post date:** [July 17, 2025, 8:03pm UTC](https://forum.wixstudio.com/t/help-with-on-scroll-expand-of-clip-path/72170/1 "2025-07-17T20:03:44Z")

</div>

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

> **[KM Design Solutions | advanced web develoment | Chicago, IL, USA](https://www.kmdesignsolutions.com/)**
>
> Re-Imagine a new advanced website or award-winning graphics and marketing for your business with KM Design Solutions. Elevate your brand with our innovative and client-centered approach. Based in Chicago, IL.

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

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [July 17, 2025, 10:24pm UTC](https://forum.wixstudio.com/t/help-with-on-scroll-expand-of-clip-path/72170/2 "2025-07-17T22:24:06Z")

</div>

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%

---

<div class="post-metadata">

**Author:** ![tom66859](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@tom66859](https://forum.wixstudio.com/u/tom66859)\
**Post date:** [July 17, 2025, 10:57pm UTC](https://forum.wixstudio.com/t/help-with-on-scroll-expand-of-clip-path/72170/3 "2025-07-17T22:57:45Z")

</div>

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

Tested and working

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

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [July 17, 2025, 11:26pm UTC](https://forum.wixstudio.com/t/help-with-on-scroll-expand-of-clip-path/72170/4 "2025-07-17T23:26:05Z")

</div>

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.

> **[Home | My Site 61](https://dcidesigns.wixstudio.com/my-site-61)**

 ![Screenshot 2025-07-18 092348](https://us1.discourse-cdn.com/wix/original/3X/f/6/f67272769828c690b24701af77606041adc99ced.png)