Marquee Animation GSAP

[Atul Singh]

Hello everyone,
I'm attempting to add a marquee animation that scrolls text from left to right and right to left. It's functioning correctly on desktop devices, but there's an issue on mobile devices. On mobile, the full text isn't scrolling properly. Can anyone help me with this? Thank You.
 

See the Pen qBLGvGm by atulkumarsingh (@atulkumarsingh) on CodePen

[Rodrigo]

Hi,

 

You should try the Horizontal Loop helper function:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Here is integrated with the Observer plugin in order to switch directions based on the scroll direction:

See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen

 

Here is the same effect but using ScrollTrigger:

See the Pen GRwePYw by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Atul Singh]

@Rodrigo Thank you very much.
 

I've implemented the Horizontal Loop helper function, but it's not working on mobile devices. I also want the second row to scroll from left to right. How can I achieve this?

See the Pen qBLGvGm by atulkumarsingh (@atulkumarsingh) on CodePen

[Rodrigo]

Hi, 

 

There are a few issues in your demo. You have just one element being passed to the helper function. While it works it does have a drawback of the element jumping at the end of the animation. It's highly recommended to have at least two elements.

 

Here is an example that shows how to create two different loop instances in opposite directions:

See the Pen gOBaGVo by GreenSock (@GreenSock) on CodePen

 

Then the procedure is the same, just check for the ScrollTrigger instance's update and direction in order to update their timescale according to that:

See the Pen QWQYmaN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!