How can I do this scroll overlap effect with clip-path animation?

Design help Animations & Interactions
1

Here is the example I’m trying to replicate:
https://cms-portfolio-scroll.webflow.io/

So far I have only found tutorials for scroll animations with clip-path that do not overlap sections… Does anyone have a tutorial for something similar?

Here is my public share link: LINK
(how to access public share link)

2

Hi @Iris_Miranda , welcome to the forum :smile:

This is a very specific and custom made interaction, using some custom CSS and JavaScript. I believe finding a tutorial for that is a long shot :frowning:

1 Like
3

Hi @Iris_Miranda when you open this website in DevTools you will find that this website use for animation GSAP ScrollTrigger. You can even look into injected JS code on bottom of HTML. On GSAP forum is many great examples in CodePen. If you get stock with something the are great folks to help you solve your request.

1 Like
4

Thank you, I will look into that :raised_hands:

1 Like