How to apply auto height to the parent element while using scroll trigger

[3aluw]

Hello, I've been trying to create a card stacking animation. It works fine but the trigger element's (the parent -.crdas-) height does't change despite using height : auto. because of that I'm getting this giant free space under the cards.

 So, how can I make the parent element end by the end marker?  Are there any better ideas ? . Please  open the codepen in the full mode.

Thank you for your help.

See the Pen GRwVeKw by 3aluw (@3aluw) on CodePen

[mvaneijgen]

Hi @3aluw welcome to the forum!

 

Check out the following video from the Greensock YouTube channel it is the best explanation on how to go about building such an animation.

 

If you use a .from() animation instead of a .to() you can remove all the calculations you need to do in CSS and just let GSAP handle everything. So that is what I did in the code below and instead of yPercent: return -(index + 1) * 100; I do y: () => window.innerHeight, so now each card is coming from off screen with a distance of the current windows height. 

 

Please watch the video is goes over so much more! Hope it helps and happy tweening! 

 

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

[3aluw]

It works now, thank you so much. 

To slow the animation down I used :   

{
//otehr options
end: "=+2500px"
}

Is this the perfect way to do it, Or there is a better practice? 

[mvaneijgen]

If it works it works. But you can also change it to include the window height.

 

{
//otehr options
end: () => `top+=${window.innerHeight * 2.5} top`
}

I like to be explicit and include all the values of the property. Yours also works, but when starting out it is better to define the defaults, so you know how they work.

I've used a function based value, so this will recalculate  on resize eg end: () => value instead of end: value 

 

And instead of 2500 I've used the window inner height * 2.5, so it will be 2.5 times the height of the window. If the browser window would be 1000px this would result in 2500px, but it will be smaller on smaller screens, which could help that it feels more even on different screen sizes. 

 

Hope it helps and happy tweening!