Horizontal scrolling content not working correctly

[todd.eagle 1 Likes (Newbie)]

Hi!

 

I'm attempting to do a news ticker type scrolling animation across a web page, but it slows down at the end then resets.  I want it to scroll continuously uninterrupted.  No clue how to solve it.

 

Thanks!

 

Todd

See the Pen xxgwGNK by todd-eagle-the-looper (@todd-eagle-the-looper) on CodePen

[PointC 14,429 Likes (Superhero)]

.to( ".q_layer_1" , tDuration, { x: -commentsWidth,  ease:"none", repeat: -1 } )

Happy tweening.

 

[todd.eagle 1 Likes (Newbie)]

Still a "no go".

 

The "ease: none" worked as intended(thanks!), but the content continues to reset.  Is there a way for the content to loop?  I would like the content to exit the left side of the page while also entering from the right.

 

The CodePen link in the original post has been updated with the most recent solution provided in this thread.

 

Thanks!

 

Todd

[PointC 14,429 Likes (Superhero)]

Whoops. I think I only read half of your question.

 

For stuff like that I usually just clone the node and animate them both to an xPercent of -100. This is a demo from another thread, but shows the same basic idea. It just has a hover speed/slow effect.

 

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

 

Happy tweening.

 

[Visual-Q 979 Likes (Leader)]

 

1 hour ago, PointC said:

For stuff like that I usually just clone the node and animate them both to an xPercent of -100. This is a demo from another thread, but shows the same basic idea. It just has a hover speed/slow effect.

 

Such a simple way to create a looping Carousel. Thanks for posting that Craig, I missed it the first time around.

 

 

[todd.eagle 1 Likes (Newbie)]

Thanks Craig!

 

I was able to successfully implement in CodePen.

[PointC 14,429 Likes (Superhero)]

Glad to hear it worked for you. Happy tweening.