Continuous news ticker From RIGHT to LEFT

[noesiscsd 0 Likes (Newbie)]

Hello!

 

According to this topic: 

I recreate this and updated this to the more modern syntax in GSAP 3, and I tried to "reverse" the movement.

So I want to move the texts from RIGHT -> LEFT.

 

I changed the gsap.set(".ticker-wrapper", { x: -tickerWidth }); [minus tickerWidth ] and this starts as you want but the loop isn't working as you expect.

 

I can't find any solution.

Any help?

 

Thank you so much!

 

 

See the Pen NWwENgb by noesiscsd (@noesiscsd) on CodePen

[Shaun Gorneau 2,037 Likes (Superhero)]

Hi @noesiscsd,

 

The problem I see here is that two tweens are fighting. Because you've already offset the content that needs to move from "off canvas" to the left, you only have to move it to 0, and then repeat that process. Because we're using a set() here ( rather than a fromTo() ), you'll want to repeat the timeline, not just the tween. Also, due to margins and padding, there is a skip ... so I added a buffer to the x value.

 

See the Pen VwrVPbj?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

 

Shaun

[noesiscsd 0 Likes (Newbie)]

Yes, that's a good solution,

 

but if you change the spaces you need to recalculate the buffer.

 

The fromTo is a method to solve this problem?

 

The "classic" animation that goes from right to left works without this buffer problem.
How you can solve this for the animation that goes from left to right

 

Thank you

 

 

[PointC 14,429 Likes (Superhero)]

Just my two cents but I find it much easier to use xPercent for these types of repeating scrolling animations. Here's a fork of your demo with that option. 

 

See the Pen vYWQZyX by PointC (@PointC) on CodePen

 

If you want it to reverse, just change the tween to .from xPercent:-100 rather than to. If you want it to yoyo, set yoyo to true.

 

Hopefully this helps. Happy tweening.