Jump to content
Search Community

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

3aluw test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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. Capture.thumb.JPG.99be89cce910854ffc356b2ac2fafef3.JPG

 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

Link to comment
Share on other sites

  • Solution

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

Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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! 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...