Stacked card opacity scrolltrigger animation GSAP

[KulBoiz]

How can I trigger opacity: 1 to the top item and opacity: 0.6 to the item behind like the images.

Here is my code: https://codesandbox.io/p/sandbox/practical-banzai-26fql6?file=%2Fapp%2Fpage.tsx%3A1%2C1

Please help me ❤️

[mvaneijgen]

Hi @KulBoiz welcome to the forum!

 

There are a few issues with your demo. First there are several errors, that makes it hard for anyone to jump in and help you. Second ScrollTrigger can't be on individual tweens of a timeline, it can only be on the timeline it self. And you linked to the Readme.md file, I had to look through several pages to fine the code that you'd written which was in the page.tsx file. 

 

What I've done is use another set which sets the opacity of the cards to 1 - (0.4 * index). Which means the first card is index 0 so 1 - (0.4 * 0) = 0 the second will be 0.4, so 1 - 0.4 = 0.6, ect for the next card. 

 

Hope it helps and happy tweening! 

 

https://codesandbox.io/p/sandbox/gsap-scrolltrigger-forked-j87g7f?file=%2Fapp%2Fpage.tsx%3A35%2C10

[KulBoiz]

13 hours ago, mvaneijgen said:

Hi @KulBoiz welcome to the forum!

 

There are a few issues with your demo. First there are several errors, that makes it hard for anyone to jump in and help you. Second ScrollTrigger can't be on individual tweens of a timeline, it can only be on the timeline it self. And you linked to the Readme.md file, I had to look through several pages to fine the code that you'd written which was in the page.tsx file. 

 

What I've done is use another set which sets the opacity of the cards to 1 - (0.4 * index). Which means the first card is index 0 so 1 - (0.4 * 0) = 0 the second will be 0.4, so 1 - 0.4 = 0.6, ect for the next card. 

 

Hope it helps and happy tweening! 

 

https://codesandbox.io/p/sandbox/gsap-scrolltrigger-forked-j87g7f?file=%2Fapp%2Fpage.tsx%3A35%2C10

Thanks for your answer, I tried your code but it doesn't work as I expected the second item didn't grow opacity to 1 when the first item disappear. If I remove scrollTrigger then I can't do the animation when scroll the page.

I don't know how but it still works when I use ScrollTrigger in a timeline: https://drive.google.com/file/d/1DJhfRBIFmzY2pOkM7hIXaCGL0jVzmvlj/view?usp=sharing.

Could you give me another hint, thanks.

index.tsx

[mvaneijgen]

4 hours ago, KulBoiz said:

I tried your code but it doesn't work as I expected the second item didn't grow opacity to 1 when the first item disappear.

That is correct, your move away animation is also what sets the opacity to 1 and you want that to happen before that, so you will need a new tween for that. This tween will set the 2nd and 3rd image to opacity one. Personally I like to write my animations, out by hand, staggers are great, but can be really hard when you don't know the flow of the animation yet. There is always time for optimisation later.

 

4 hours ago, KulBoiz said:

If I remove scrollTrigger then I can't do the animation when scroll the page.

 

It is fine if you want to use ScrollTrigger, but you can only have ONE ScrollTrigger in a timeline and it needs to be on the timeline, you can't have individual tweens with ScrollTrigger! Please check the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Also keep in mind, the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I hope with all this info you can take another step to what you want to make and when you're stuck again post back here with a new demo. I would even advise you to move over to Codepen.io and create what you want outside of your setup, so you can freely use everything and don't need to worry about your framework. Hope it helps and happy tweening! 

[KulBoiz]

40 minutes ago, mvaneijgen said:

your move away animation is also what sets the opacity to 1 and you want that to happen before that, so you will need a new tween for that.

Hmmm, this thing is harder than I thought, thanks for ur advice. Maybe, I'll find out the way to do each animation and then combine it later.

Hope you have a nice day at work!