Scroll Trigger Vertical Stacked Cards, Preview at Bottom

[Julian Hart]

Hi I would like to create a section where I can scroll through cards (flexible heights, all larger than 100svh), which then stick to the bottom. I was able to build this already. But what I also would like to achieve is that the next sections should already be visible at the bottom, like stacked papers. See the sketch attached.

Here is where I got stuck:

 

 

 

See the Pen YPyMJvp by Mirko-the-typescripter (@Mirko-the-typescripter) on CodePen.

[mvaneijgen]

Hi @Julian Hart welcome to the forum!

 

 

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.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

This demo from the collection comes already close but instead of each card animating a fixed amount you'll have to animate them the height of the current cards height. 

 

Hope it helps and happy tweening! 

 

See the Pen VwRBNEb by mvaneijgen (@mvaneijgen) on CodePen.

 

[Julian Hart]

Hi @mvaneijgen

 

Thanks for your response. Based on your idea, I did this approach. Is that kind of what you are suggesting?

I am using the total height with scroll trigger and just animate each section on Y

 

See the Pen NPGmoRw?editors=1010 by Mirko-the-typescripter (@Mirko-the-typescripter) on CodePen.

[mvaneijgen]

 

My head is spinning from all the complex debounce and resize logic, this is all built into ScrollTrigger. I've never needed this when setting up a ScrollTrigger animation, so I have no clue what this is doing here. I see you're creating fixed elements, but I would just set pin: true on your ScrollTrigger setup to have things stick on the page.

 

Currently, all your cards have the same content and thus are the same height, which makes it hard to judge if things are working.

 

Again, I would remove all ScrollTrigger logic and just focus on the animation you want to happen. When that works, you can add ScrollTrigger back in and probably everything will work.

 

Also, note that in my explanation, I stack all the elements with CSS grid to have them in a known position; this will make animating them much easier than having them all layout on the page normally, again check my post there is a lot of explanation which will make working with ScrollTrigger a lot easier. 

 

Hope it helps and happy tweening! 

 

[Julian Hart]

Hi @mvaneijgen

 

Thanks for your quick response.

 

I've added the debounce / resize logic as I am animating the height of these cards. Once I resize the window the whole animation is off as I need to use the divs outerHeight.

 

See the Pen gbayqEX by Mirko-the-typescripter (@Mirko-the-typescripter) on CodePen.

 

I've added the pinned logic here, that in deed makes sense.

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen VYvNoXN by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Julian Hart]

Thanks @Rodrigo this is already going in the right direction, but still not quite right as each card is not really “scrolling” through.
If I am right, you just see 100vh but not the whole card.

 

I'm still testing some things but cannot really wrap my head around it.

 

Edit:

I think I made some progress, this is sort of the right direction: 

See the Pen raOgWJR?editors=1010 by Mirko-the-typescripter (@Mirko-the-typescripter) on CodePen.

 

Thanks @Rodrigo @mvaneijgen for pushing me in the right direction!

 

[mvaneijgen]

It was hard to see without content in it, so I added some fake content to each section. I then animated the card to its own height - the current window height. I did some extra calculations to have each card animate over the same amount of time by calculating how much height it has compared to the current window height.

 

Then it would look something like this. Hope it helps and happy tweening! 

 

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

[Julian Hart]

OK wow, I think I got it now:

 

See the Pen yyYWbpx?editors=0011 by Mirko-the-typescripter (@Mirko-the-typescripter) on CodePen.

 

Thanks for bringing me on the right path!