Continuous animations for an element after a ScrollTrigger timeline is completed

[VMS]

Hey I am super new to GSAP.
How can I ensure that after my reveal animation is completed using GSAP and ScrollTrigger, the page doesn't scroll down right away but instead triggers a new animation on the revealed element (in this case its  .center), and only after this  animation is completed, it scrolls to the next section?

EDIT:-

I have tried adding another timeline in .center   element but now also as you can see once first end  reaches scroll-end  after the reveal animation i want my .center element wait for second end  to reach scroll-end again. Instead center starts scrolling just after reveal animation is completed(i.e first end reaches scroll-end )

See the Pen wvNMGxm by VAIBHAV-MARKANDEYA-SINGH (@VAIBHAV-MARKANDEYA-SINGH) on CodePen

[Rodrigo]

Hi,

 

You can use the Observer Plugin in combination with ScrollTrigger as shown in this demo:

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

 

More information on the Observer Plugin:

https://gsap.com/docs/v3/Plugins/Observer/

 

Hopefully this helps.

Happy Tweening!

[VMS]

@Rodrigo

Thank you for your response. I'm relatively new to GSAP, and I'm having some difficulty understanding how to apply the Intersection Observer plugin to achieve my desired functionality.

Could you please assist me in modifying my code to create a scenario where, once the reveal animation is complete, the `.center` element remains in place? After that, I'd like to implement a scroll-based animation on the `.center` element. Finally, when the animation inside the `.center` element is finished, I want the page to scroll down to the next section.

I appreciate your help in achieving this. Thank you!

[mvaneijgen]

Hi @VMS can you show us what you've tried already with the feedback from @Rodrigo? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools!

 

You could also just add another tween to the timeline and add a small pause to the timeline that does nothing for X amount of seconds (keep in mind that scrubbed ScrollTriggers don't really work on durations, that is why I've increased your ScrollTrigger distance to 150%. Check out this tutorial how to work with ScrollTrigger 

 

 

If you still need help please show us what you've tried with the feedback. Hope it helps and happy tweening! 

 

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

[VMS]

@mvaneijgen

Thank you for your help, your approach indeed resolved my issue. However, I would like to acknowledge @Rodrigo's explanation of the Observer plugin. Although I've grasped the concept of how the Observer works, I couldn't quite figure out how to apply it to achieve my specific requirements. Consequently, I haven't made any tangible progress in that direction yet, and as of now, I don't have any practical results to share.

Your assistance was greatly appreciated.

[Rodrigo]

Hi,

 

The Observer Plugin basically is super useful when you need to watch certain events (mouse wheel, scroll, pointer, touch, key, etc) and attach a GSAP instance to those events when they  happen.

 

Here is a super simple demo that is kind of close to what you're trying to do:

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

 

You can mix that with ScrollTrigger and the example that mixes both Observer and ScrollTrigger to do that.

 

Hopefully this helps.

Happy Tweening!