Timeline scroll animation - best approach?

[jonsaul 2 Likes (Newbie)]

Hi all.

This is my first post on the forum! I was hoping for some advice with a scroll based interaction I am working on.

 

Essentially I have a fullscreen panel, containing a video and an H1 positioned on top (in reality I think the H1 will be an SVG logo).

I am looking to have the H1's position on the Yaxis adjusted as you scroll down the page, effectively going in the opposite direction to normal, and disappearing from view out the bottom of its parent container.

 

I have built this out the best I can so far using a gsap timeline and scroll event on the window.

It all works as it should, it doesn't really feel great and can be a little jerky to begin with... so my questions would be... 

 

Is my approach suitable for this ?

Are there any quick wins I could make to improve it?

Or should it be done another way eg. scrollTrigger ? (No idea how to do this atm)

 

Any advice greatly appreciated.

 

Many Thanks!

 

See the Pen KORVpM by jonsaul (@jonsaul) on CodePen

[akapowl 5,482 Likes (Superhero)]

 

Hey @jonsaul - welcome to the forums.

 

I don't think there is anything particularly wrong with the approach you chose, but nonetheless, I would highly recommend using ScrollTrigger for scroll-based animations - especially if you plan on implementing more of such - because

 

• it is super versatile
• it is super performant
• it makes it easier to adjust things to your liking and maintain later on
• it gives great possibilities at hand to make sure, your scroll-based animations are truly responsive to resizes

     

      [ and so forth ]

 

 

I took your example and made a pen to show you how things could be set up with ScrollTrigger 

 

See the Pen f2ade955320198dbb3cf5b084c6a1c36 by akapowl (@akapowl) on CodePen

 

 

 

Go ahead, fork it, and play around with the values to get a hang of what does what.

Then, for more info on what does what, I recommend you go on and check the docs

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

 

And if you find yourself having any particular issue later on, don't hesitate asking in the forums.

 

Hope this was helpful.

 

Cheers,

Paul

 

[jonsaul 2 Likes (Newbie)]

@akapowl thank you Paul! 

I think i will be requiring scrollTrigger in some other areas of my build going forward, so it makes perfect sense to do this as you have demonstrated, I will fork the pen and learn how this all works.

 

Thank you for your help and clear rationale.

Much appreciated.