GSAP - How to Reverse This?

Hey (Hutley) and friends,

I finally got GSAP working, which appears to be pretty slick! I was curious if anyone could tell me based on this code whether there was a way to easily reverse the direction of this scrolling ticker?

Thanks in advance!

https://codepen.io/brittany-golden/pen/xoMdMv (this one will work, promise I won’t touch it!)

.play()
=>
.reverse();

Always read the docs :wink:

EDIT: Oh sorry, I also made one other change while fumbling about with it: You can only reverse something from the end, not the beginning.
.progress(1).progress(0)
This line of code reads “Go to the end of the animation. Go to the start of the animation.” Which seems highly redundant to me. Since you want to go backwards, start at the end: remove the .progress(0).

1 Like

Ah, sounds good! I’ll give that a go. Quick question for you - in order to have two lines like this scrolling, one going from left to right, the other from right to left, do I need to have two completely duplicate blocks of js code with all the same settings, but one with play() and on with reverse(), or is there a more efficient way to add that into the same block?

Thanks Hutley!

So here’s what I have rolling now! It’s still clunky (trying to work out why) but I think I’m making progress! Any ideas why the speed is different, and the cloning is kind of off on the start?

Also, I tried to remove the progress(), but it doesn’t seem to move without it. 0 -1 and 1-0 appear to control the direction in some ways.

PEN: https://codepen.io/brittany-golden/pen/xoMdMv (seems to work correctly at the start here)
WEBPAGE: (scroll to the bottom - the second marquee on this page): https://stable.stable-demos.com/blakes-seed-based/ (This is not working as well…but it’s the same code?).

What’s weird about the website one is that eventually, the bottom line stops cloning oddly. I’m assuming something is off in my CSS, but I’ve tried appending / prepending, reversing directional attributes, but it’s still funky on the website…

I’m… not sure why it stops after a certain amount of time. The source inspector tells me the numbers keep rolling even when the animation stops.

Seems to be working from my perspective, although you’ve doubled up the bottom line for some reason.

The bottom line seems to be counting up from a significantly higher number than the one above it.

Why are these lines being cloned at all?