Is there a better way to create sequence based animation on scroll than this?.

[Rimu]

here is the link to the stackblitz demo starter: https://stackblitz.com/edit/stackblitz-starters-rxxqsauv?file=app%2Fpage.tsx

Hii i am new to gsap im trying to execute a sequence on animation based on scroll, i don't need the animation to scrub to the scroll bar.
i want to execute the next sequence on the next swipeup / scroll up

i tried using the scroll.progress to execute the animation but that doesn't full fill the requirement of executing animation on the next scroll and disabling pin on the last /first animation

 

i was able to do something similar using the gsap Observer and scroll trigger in combination but this is not upto the mark and is a bit lacking when scrolling very fast. 

can anyone please suggest a better way.

Edited July 17, 2025 by Rimu

[mvaneijgen]

Hi @Rimu welcome to the forum!

 

The Observer is your best bet for this. Check out my post how to step through a timeline using the Observer plugin 

 

 

Hope it helps and happy tweening! 

[Rimu]

2 hours ago, mvaneijgen said:

Hi @Rimu welcome to the forum!

 

The Observer is your best bet for this. Check out my post how to step through a timeline using the Observer plugin 

 

 

Hope it helps and happy tweening! 

Thank you so much for you help i was able to tweek it a little and create what i needed here a link to the codepen

See the Pen gbaaogQ?editors=0011 by RimuruSama (@RimuruSama) on CodePen.

scroll from bottom and resume animation