Issue's with mapping content change based on an existing timeline

[amitr95]

Hello,

 

Returning to the world of GSAP after a few months off. I'm trying to explore a block where cards are stacked upon each other, and the content related to that card changes at the same speed as the card enters and exits. For example, when card 2 is sliding in, make card 1 content slowly fade out and card 2 content fade in and slide in at the same speed as the card is.

 

In my demo, you can see it somewhat in effect, though my content is overlapping each other from cards 2 onwards and it's not quite matching the speed of my cardChangeTL. Where is my logic falling apart? 

 

Any guidance would be appreciated.

 

Thanks!

See the Pen gOyaxaQ by amit_rai95 (@amit_rai95) on CodePen

[mvaneijgen]

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. 

 

Below your pen with ScrollTrigger removed and GSDevTools installed, so you can really focus on the animation an make sure it is doing what you want it to do

 

I've just written a guide how to create any cards stacking effect with GSAP (and ScrollTrigger), the most important point is start with all your elements in a known position and start animating from there.

 

 

In your demo on line 40 you tell it to animate '-=0.3' seconds before the start of the timeline, that seems weird to me. The start is zero, but you tell it the start is -0.3. The property autoAlpha sets the  visibility, so no need to also set it in your tween. To make it simple on your self I would create just one timeline and add all the tweens to there, when you think everything is working you can always optimise it later and split it out to separate timelines.

 

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

 

 

The pen below might really help you in your setup, from my post above. Hope it helps and happy tweening! 

 

See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen

 

[amitr95]

Hey @mvaneijgen,

 

Apologies for the late response. But! I can confirm stripping it back did allow me to focus in on problem areas and I managed to solve it via this approach  

Appreciate the demo you've linked also. I like the perspective effect! One to keep in mind for future builds. Many thanks for the assist.