Jump to content


Reverse timeline animation on scroll direction

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts



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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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:

  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:



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!

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.