Stacking cards on scroll and scaling the previous cards as you scroll

[amitr95]

I feel like close with this one, but cannot get two items to work in my demo:

 

1. I want the next card to appear from off screen. At the moment, card 2 is visible at the bottom of card 1 
2. When scrolling up, I want the card that is slowly hiding, to scale down

 

The effect I'm trying to emulate can be seen on this website: https://swagapp.com/

 

See video here: https://i.imgur.com/Rnthq26.mp4

 

I thought the cards were touching because of the start and end triggers, but playing with those yielded the same results. 

 

Any advice?

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

[Rodrigo]

Hi,

 

Maybe this example can give you a good starting point:

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

 

More details can be found on this thread:

 

Hopefully this helps.

Happy Tweening!

[amitr95]

Hi @Rodrigo,

 

Apologies for the late response, was AFK for a while. Nevertheless, happy to say I've made progress regarding the scaling aspect of my query. However, I still can't get the next card from the pinned card to come from off screen (the next card is always touching the bottom of the top card). Any insight on how I can achieve this in my use case? 

 

Your demo link isn't showing anything for me on scroll?

 

See my latest demo here: 

[mvaneijgen]

If you disable all your javascript and just scroll over the page normally, you will see that all your cards are touching, so this will also be the case when you enable GSAP. The best course of action would be first make sure your HTML and CSS are 100% correct, before you even think about adding any GSAP code. Laying out your elements the correct way is the most important rule to learn when working with GSAP.

 

See the Pen oNQwvdq?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

So if you want a gap between your elements, add a gap between them. See line 22 of your CSS . If you are happy with the gap (you could also make the gap dynamic using something like vh, but I'll leave that up to you) enable GSAP again and if you want to change it at a later stage be sure to disable GSAP and change your CSS. Hope it helps and happy tweening! 

 

Side note: you should never animate your trigger element! in you scaleDown tween you animate the card element, which is also a trigger element. Best cause of action is to wrap all your .stackCard elements in an element called .stackCardTrigger and use that as the trigger element. Right now it seems to work ok, but you will encounter an issue if you keep doing it like this, so the best thing to do is just to never animate your trigger element. 

 

See the Pen poQwzKg?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen