Combine timeline, scrolltrigger animation

[adamchampagne]

Currently, we and working on a demo. We combine timeline and scrolltrigger to make the animation run smoothly. But we do not know how to lock scrolling and let the animation run automatically. It likes each time a user scroll up or down, the animation will run step by step ifseft.
For example in the codepen, once users hit the scroller start, we want to lock the scrolling and each scroll down the timeline will run to a specific label like sliding a slide. Like this example: https://x.develup.pro/#technologies.
Please help us. Thank you

See the Pen OJrgPBK by Nelson-Nguyn (@Nelson-Nguyn) on CodePen

[mvaneijgen]

Hi @adamchampagne welcome to the forum and thanks for being a Club Greensock member 🎉

 

That is not what ScrollTrigger is made for, ScrollTrigger is a tool with which you can build an animation with GSAP and hook it up to the scrollbar, so that the user is in control of that animation while scrolling.

 

What you are describing sounds like the Observer plugin https://greensock.com/docs/v3/Plugins/Observer which which you can listen to scroll events and do logic based on that. See below example, you can scroll as much as you want, but it will only trigger the next animation when the current one is done playing. Hope it helps and happy tweening! 

 

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

[adamchampagne]

Hi @mvaneijgen, thank you for suggest of using Observer. We're intend to use it but we can not find any examples or documents that combining the timeline plugin with Observer plugin. Can you make an simple example on combine the Observer plugin with the timeline plugin?

[mvaneijgen]

It is not going to be simple, but here is a bare bones example. It will tween to the next or previous label in the timeline. The previous example checks for if the timeline is playing and that is something you also want to do, but what you want to keep in mind is that you're just controlling the timeline based on what happens when the user scrolls. Hope it helps and happy tweening! 

 

See the Pen NWezLRQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[adamchampagne]

Thank you for suggesting this. That is exactly what we are looking for. Out timeline have a lot of label and we intend to use it to play all the animation

[adamchampagne]

Thank you for suggesting this. That is exactly what we are looking for. Out timeline have a lot of label and we intend to use it to play all the animation