MantasK Posted January 24, 2023 Share Posted January 24, 2023 Hello hope everyone is doing well, I`m trying to make like a timeline where when the first-child gets smaller once the second item is in view then when the next item is in view it also gets smaller. My first attempt I tried to animate each card individually but it wasn`t working smoothly and the page was flickering for some reason, I deleted that code and went to do some research. Then I came across this other post After following the steps I ran into the issue of not being able to figure out how could I make the previous card get smaller whilst the new card is sliding up. The effect I`m trying to achieve is something like on this https://weltio.com/ site if you scroll to the second section it will be there. Any input or tips is greatly appreciated thank you! Sorry for the really bad codepen I normally use tailwind and nuxt so I`ve forgotten vanilla CSS. See the Pen poZLozp by dev-mantas (@dev-mantas) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 24, 2023 Share Posted January 24, 2023 Have you seen the latest ScrollTrigger video on the Greensock YouTube channel? It amost exactly looks like your example website, but in a reverse stacking order. Link to comment Share on other sites More sharing options...
MantasK Posted January 24, 2023 Author Share Posted January 24, 2023 Thank you sir! Wish the title had something to do with card stacking haha I definitely would`ve found it in my hours of trying this... Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 24, 2023 Share Posted January 24, 2023 That is the thing with GSAP tools, you can build everything your heart desires, so the videos on the YouTube channel don't usually focus on one particular part, because the concept that is being talked about could be used on multiple solutions just by tweaking some parameters. Personally I've watched every video on the channel and every time I watch them again I'll learn something new. There is so much general knowledge to glean from them! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now