Handle GSAP animation on scroll

[Geoffrey-TW]

Hello everyone,

I am currently experiencing problems with animated content. For the moment, the animation launches when the page is loaded and runs normally. If I associate a scrollTrigger to my timeline, the animation only starts when the page is scrolled.

 

I would like to be able to move forward/backward in the animation when scrolling without it stopping. For example, if the user comes back in the middle of the animation, it should resume where the person left off.

 

Once the animation is over, I would like to be able to go back to the animation and use the scroll to revert to the beginning of the animation. 

Finally, during the animation, I would like to prevent the user from scrolling to the content of the site. The scroll must be done only in the animation. 

 

I don't know if all this is possible but we never know

 

Sorry if my question seems a bit far-fetched, i'm new here 😅

 

Thanks in advance for your answers

See the Pen RwyQgpQ by Geoffrey-TW (@Geoffrey-TW) on CodePen

[Rodrigo]

Hi @Geoffrey-TW and welcome to the GreenSock forums!

 

Scroll based animations have a few constraints that come with the territory and there is not much that can be done to circumvent that. For example if you want to control the animation progress as the user scrolls up and down but at the same time you want the animation to keep the animation running, it creates a logic and performance problem. Who controls the animation? First the scroll if there is a scroll event but then the animation gains control over itself, but that means that as the animation runs by itself you have to update the scroll position and the progress of the instance that controls the animation via scroll. See the conundrum we're diving into? It's a logical mess and checking/updating everything all the time could lead to performance issues.

 

As you mention achieving everything you're after is quite hard, especially if you are just starting with GSAP. My best advice is to start with something relatively simple and the scale it up to a more complex scenario. First create and get done the image scroll animation and then move onto add the text position animation. 

 

I think this should be a good starting point:

See the Pen JjvpOwy by GreenSock (@GreenSock) on CodePen

 

If  you want to do some animation of the text content, you can create another ScrollTrigger instance. Be aware though that animating properties like Y, padding top/bottom, margin top/bottom, etc. could result in some odd behaviour, since the calculations ScrollTrigger will make will be thrown off. Also is never a good idea to animate the trigger element as well, always try to wrap the content you're animating around another DOM element that serves as the trigger element.

 

You can read more best recommended practices for ScrollTrigger here:

Finally if you have more questions please let us know and we'll help you resolve your issues.

 

Happy Tweening!

[Geoffrey-TW]

Thanks for your answer! 

 

I will look into what I can do with this animation.

 

Happy Tweening too !