How to determine the height of a pinned section based on the number of scroll

[Mitiss]

Hello everyone,
I am trying to solve a problem of synchronizing a section (pinned with scrollTrigger) with a certain amount of scroll until I reach the end of the scrollTrigger.

Basically I have a counter that is inside my pinned section. Once it is pinned I have a Gsap Observer that animates my counter from counterSequence[n] to counterSequence[n+1] (this is obviously for an imageSequence animation). That means each time I scroll inside my pinned Section, I activate an animation of my counter... until I reach the end of my counterSequence (meaning my last frame on my real project).

The problem is that scrollTrigger only allows to specify a start and end of the section and I don't know how to synchronize it with my number of scrolls until I finish all my counter Sequences (for now I did end: "+=800%" so that I am sure I have enough space to scroll to get all my counter sequences).

Do you have any idea of the direction I should take ? (No need to spend too much time on my codepen just any idea ^^)
Thank you !

See the Pen bNbZpxg by Mitiss (@Mitiss) on CodePen.

[mvaneijgen]

Sounds like you just want the scroll to stop and start based on if the Observer plugin is doing something. The below demo implements this logic and just uses ScrollTrigger to enable/disable the Observer section. Hope it helps and happy tweening! 

 

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

[Mitiss]

Thank you so much for the answer, it seems to work. But I am also using Lenis scroll, do you know where in your code should I use Lenis.stop and Lenis.start to avoid scroll conflicts ? I am trying to find a solution but I keep being stuck in the observer onUp and onDown callback

[mvaneijgen]

No sorry, I don't use lenis, seen that it is a third party plugin we can't really provide support for that, maybe ask their support or check their docs.