Jump to content
Search Community

Continuous news ticker From RIGHT to LEFT

noesiscsd test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

  • Solution

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.

:)

 

  • Like 5
Link to comment
Share on other sites

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.
×
×
  • Create New...