Stagger animation along with ScrollTrigger

[teins]

I'm implement a animation like this (open door or window blinder) and I want it sync with scroll trigger, each scroll will open it a litter bit, how can I get this with GSAP?

 

This is minimal code with a single animation (run from top 0 to bottom 100), it has many door (or blinder)

https://stackblitz.com/edit/vitejs-vite-sgdz9y?file=src%2Fpages%2Fhome%2Fpage.tsx

[Rodrigo]

Hi @teins and welcome to the GSAP Forums!

 

I think your approach is a bit convoluted. I think the best approach for this is use the advanced staggers options GSAP has to offer:

https://gsap.com/resources/getting-started/Staggers

 

Here is a simple demo:

https://stackblitz.com/edit/vitejs-vite-kn5xpa?file=src%2Findex.css,src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

[teins]

thank @Rodrigo, the animation is great, but I want to control animation when scroll, which means it will open slowly when scrolling down

[Rodrigo]

Hi

I'm on my phone now, but maybe just change the easing function to none:

esse: "none"

 

Give that a try and let us know how it works 

 

Happy Tweening!

[teins]

nah, not the animation I want to do
thanks btw

[Rodrigo]

Hi,

 

I updated the demo to use ScrollTrigger:

https://stackblitz.com/edit/vitejs-vite-kn5xpa?file=src%2Findex.css,src%2FApp.jsx

 

Hopefully this helps

Happy Tweening!

[areebabbas83]

On 10/13/2024 at 2:36 PM, teins said:

thank @Rodrigo, the animation is great, but I want to control animation when scroll, which means it will open slowly when scrolling down

cannot understand your question but i think so if you remove the "scrub" maybe it will solve your case and change the top and end positions. If its solved kindly explain how you did it?

[Rodrigo]

Hi @areebabbas83,

 

The only difference between the two demos is that one doesn't use ScrollTrigger and the other does.

 

Without ScrollTrigger:

https://stackblitz.com/edit/vitejs-vite-kn5xpa?file=src/index.css,src/App.jsx

 

With ScrollTrigger:

https://stackblitz.com/edit/vitejs-vite-kn5xpa?file=src/index.css,src/App.jsx

 

The effect is achieved using Staggers:

https://gsap.com/resources/getting-started/Staggers

 

Hopefully this clear things up

Happy Tweening!