Jump to content
Search Community

Making a timeline with scrollTrigger

MantasK test
Moderator Tag

Recommended Posts

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

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!

  • Like 1
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...