Create an animation while the section is pinned, on one scroll, without scrub.

[Nikos Xenakis]

Hello,

I would like to create an animation with a pin element, one one scroll. I want to trigger 3 separate timelines, one after the other (with three scrolls respectively). 
However I don't want to use scrub, because I want each timeline to play with its specific duration, and only when it has finished, the next one to start.
If I disable scrub, all 3 timelines play at once. I need to scroll three times, and trigger one timeline each time. It would  be something like triggering each timeline with a click. But I need this with a scroll. And the tricky part is the pinned section. So the scrollY is different depending on how much the user scrolls. I need to somehow determine that one scroll will trigger the timeline, no matter how fast this scroll is. Maybe this is not even possible, but I am giving it a try. Check the demo on codepen. I want this but without scrub.
Thanks a lot in advance and congrats for the awesome work!

See the Pen vYVxWpb by straktormedia (@straktormedia) on CodePen

[mvaneijgen]

Hi @Nikos Xenakis thanks for being a Club Greensock member 🎉 

 

Have you seen the Observer plugin? https://greensock.com/docs/v3/Plugins/Observer With it you can listen for all types of events and do logic based on them, also scroll. Bellow an example where an animation is triggered based on scroll and the animation plays no matter how much you scroll or how little. ScrollTrigger is really to hook things up to the scrollbars, but If I read your question correctly that is not what you want. Seems like the Observer plugin is the perfect use case for you! Hope it helps and happy tweening! 

 

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

 

 

[Nikos Xenakis]

I didn't know about the Observer plugin. Thanks. I read some of the documentation and watched the video, but I can't seem to find a way to do exactly what I want.

 

Now I can trigger a timeline on scroll up or down, but I don't know how to trigger a second timeline on the second scroll, a third timeline on the third scroll and so on... Also, had to add some repetitive code to make sure that the timeline will trigger more than one time and don't interrupt another timeline. I think this is not the best practice. Also, didn't even start checking how this would work with the pin, but i think this won't be a big problem.
Here is the CodePen:

[mvaneijgen]

The issue is that your three timelines are animating the same property, GSAP is highly optimised and will look at the start values and where you want them to animate to and record those values, but because you animate the same element multiple times, it will throw off these calculations. You either have to create the animations when they are needed or create one big timeline and animate to certain points on that timelines (labels are great for that).

 

I've modified your pen a bit to animate to the next label on scroll, you have to implement that for scrolling the other way, but this could be an approach, but there are multiple ways of going about his, you'll have to find the one that best fits your project. Hope it helps and happy tweening! 

 

See the Pen eYPvbVL?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

Also check out the post below, I have a feeling you'll be asking about that next 😀

 

[Nikos Xenakis]

Your response and edit to the codepen was extremely helpful. I saw the other thread, but I have one small probem still.

You approach seems that doesn't require pin anymore.

And setting preventDefault: true has  a similar effect. However I want to keep scrolling on the page when the timeline finishes.
How to achieve that? And how to have control on when the observer enables and disables?
Thanks again!

[mvaneijgen]

Had you seen my message underneath the demo?

4 hours ago, mvaneijgen said:

Also check out the post below, I have a feeling you'll be asking about that next 😀

 

[Nikos Xenakis]

I saw it but unfortunately I don't understand how to solve this. I see combinations with scrollTrigger, and in these cases how fast the user scrolls matters.

It would be ideal to just set preventDefault to false after the timeline is finished.
Sorry for that, I read what you are posting, but there are also other implementations that don't let me see the solution clearly.

[Rodrigo]

Hi,

 

What you can do is just disable that after the animation is completed using an onComplete callback in the timeline:

const tl = gsap.timeline({
  paused: true,
  onComplete: () => myObserver.disable(),
});

const myObserver = ScrollTrigger.observe({
  target: window,
  type: "wheel, touch, pointer",
  onDown: () => {
    if (!animating) {
      console.warn(animating);
      console.warn(tl.nextLabel());
      tl.tweenTo(tl.nextLabel(), {
        onStart: () => (animating = true),
        onComplete: () => (animating = false)
      });
    }
  },
  preventDefault: true
});

Here is a fork of @mvaneijgen's codepen:

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

 

Hopefully this helps.

Happy Tweening!

[Nikos Xenakis]

I managed to solve it in a similar way. But your solution is more elegant. Thanks very much for your time!