ScrollTrigger parallax stacked cards

[creativeg]

Hello,

 

I'm trying to recreate an effect from this website — towards the end of the page, the stacking cards effect. From what I can see when one enters the section, there's some sort of parallax effect and the last two cards start moving up slowly until the titles stay at the center of each card and the first card is always at the top — slowly moving up, until all cards have reached their final position. I've tried recreating something similar with various resources but for the life of me I can't get it to work

 

I have a minimal demo with my latest attempt and I would really appreciate if someone could help me out. Maybe I'm thinking this wrong or something.

Thanks in advance

See the Pen KKEPNzy by zeguillen (@zeguillen) on CodePen

[mvaneijgen]

Hi @creativeg

 

I've simplified your pen a bit to show you the essentials that I would use to create this effect. 

 

CSS is really important with when working with GSAP. And I personally like to work withall the elements in a know position, so that animating them will be a breeze, because we know where the elements start. So here I've stacked them all on top of each other. 

 

See the Pen vYPBeEB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

You want some offset in your cards, so that we set with GSAP to don't lose the 'known position' that we had created in CSS. 

 

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

 

Then 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've used function based values and some smart durations and position parameter. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

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

 

And then when you're happy with the animation add it to ScrollTrigger. Hope it helps and happy tweening! 

 

See the Pen wvOwrGg?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen