Vertical scrolling on stacking cards

[jaeyholic]

I am working on this project and I am somewhat stuck here. I have cards stacked on each other with different z-indexes and rotations. what I want to achieve is while scrolling, the section should be pinned and all the boxes should be stacked on top of each other while scrolling when done, it unpins and continues scrolling to the other section. the version I have now doesn't seem to work well. any help with this, please

See the Pen WNBQZKm by jaeyholic (@jaeyholic) on CodePen

[mvaneijgen]

Your demo wasn't loading ScrollTrigger, so of course nothing would happen on scroll. The blur was not working for me, so I had do remove it. 

 

I'm not completely sure what you animation should be doing, so I've changed it a bit. Right now it is a single .from() tween that scales in each box one by one using a stagger with a scale and opacity of 0, using .from() makes it so GSAP will animate .to() the browsers default values (if nothing else has been applied) of 1. 

 

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. 

 

Check out this awesome getting started guide if you want to learn more about the tools https://gsap.com/resources/get-started/ Hope it helps and happy tweening! 

 

 

See the Pen GRapxQL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[jaeyholic]

4 hours ago, mvaneijgen said:

Your demo wasn't loading ScrollTrigger, so of course nothing would happen on scroll. The blur was not working for me, so I had do remove it. 

 

I'm not completely sure what you animation should be doing, so I've changed it a bit. Right now it is a single .from() tween that scales in each box one by one using a stagger with a scale and opacity of 0, using .from() makes it so GSAP will animate .to() the browsers default values (if nothing else has been applied) of 1. 

 

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. 

 

Check out this awesome getting started guide if you want to learn more about the tools https://gsap.com/resources/get-started/ Hope it helps and happy tweening! 

 

 

 

 

 

thank you. this one seems to work but this isn't what I wanted to achieve. by default, all the boxes should show and when scrolling, the first box, scrolls to the back of the stacked card, and the second card becomes the current. the active box is always on top of the blurred card and the inactive boxes are beneath or at the back of the blurred card. that's what I want to achieve. sorry for the late response as well

[Rodrigo]

Hi,
 

Maybe these demos can help:

 

See the Pen BamxvZW by GreenSock (@GreenSock) on CodePen

 

See the Pen qBryorx by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[jaeyholic]

9 hours ago, Rodrigo said:

Hi,
 

Maybe these demos can help:

 

 

 

 

 

 

 

Hopefully this helps.

Happy Tweening!

yeah, the first example is more like it. can you help me make it work with the scroll trigger I am battling with it a bit. I am new to gsap please. thank you in advance

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen QWRyNOZ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps

Happy Tweening!

[jaeyholic]

23 hours ago, Rodrigo said:

Hi,

 

Maybe something like this:

 

 

 

Hopefully this helps

Happy Tweening!

Thank you so much. areally do appreciate you help

[jaeyholic]

On 5/18/2024 at 12:08 AM, Rodrigo said:

Hi,

 

Maybe something like this:

 

 

 

Hopefully this helps

Happy Tweening!

@Rodrigo  your codepen earlier worked but now the issue I am facing another issue. the START always appears below even after duplicating your codepen in my project. I still find it below the boxes. is there a way I can move the start to when the white background hits the top of the viewport? I have start: "top top" set but still not working for me

[jaeyholic]

this is how it looks. i want the start to be on top of the background, the moment the white background hits on top of the viewport, section pins then scroll animation takes place.

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

[Genas]

Have you tried using GSAP's ScrollTrigger for pinning and animating the stacked cards? It provides a lot of flexibility for scroll-based animations. Could you share the code snippet you're working with?