Reverse timeline animation on scroll direction

[dootdoot]

Hello!

 

I'm trying to replicate the animation on this website : https://www.simplex.ca/en (Section "Our advices")

 

The animation seems to work well when you scroll "up" since it only adds speed to the current animation. But when you scroll down, it does start to reverse but it doesn't keep its direction. 

 

I tried to change the "x" but it didn't seem to change anything

 

Do you know how to fix this?

Thank you!

See the Pen jOpRdJr by d00td00t (@d00td00t) on CodePen

[iDad5]

I'm not really sure if I do fully understand what you want, and what's not working.

To me, what you want sound a lot like you could use a ScrollTrigger that scrubs a timeline. You already have a timeline, but your ScrollTrigger is not using it, as far as I've seen.

 

You can even build a timeline that hast child timelines, what by the look of things could add flexibility to the setup.

 

But that likely would mean a lot of rewriting and rethinking, and if your current approach nearly there, it will not be worth it.

[Rodrigo]

Hi @dootdoot and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock!

 

What you have to do is use a negative/positive timescale in your scroll end event listener. If you keep track of this value:

ScrollTrigger.create({
  onUpdate: (self) => {
    // The value of speed is the key
    const speed = clamp(self.getVelocity() / -500);
    gsap.to(tl, {
      timeScale: 1 + speed,
      duration: 0.1
    });
  }
});

You'll see that when you scroll down the value is negative and when you scroll up is positive. So later here:

ScrollTrigger.addEventListener("scrollEnd", () => {
  gsap.to(tl, {
    timeScale: 1,
    duration: 1
  });
});

You're setting everything back to a positive value, so the direction flips again.

 

This seems to work the way you expect:

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

 

Although it seems that the method you're using for creating the marquee is not supporting that. I recommend you to use the Horizontal Endless Loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

Here is a somehow similar example using the endless loop:

It leverages the Observer Plugin but the principle is basically the same.

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[dootdoot]

Thank you! 

 

I'll use one of the helper functions