Create infinite text marquee animation with next js

[Sabz]

Hello GSAP community,

I'm seeking guidance on replicating the text infinite marquee/slide animation on the reference website. At the bottom of the hero section, there is a text infinite marquee/slide animation. And you can see the marquee is also reacting on scroll. It just moves a bit faster when scrolling. 

Reference website: https://lunivers.lu/

I would greatly appreciate any insights or assistance you can provide to help me achieve a similar effect on my project.
 

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Rodrigo]

Hi,

 

We have the Horizontal Endless Loop helper function:

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

 

Here is a demo in react:

https://stackblitz.com/edit/vitejs-vite-cljwjs?file=src%2FApp.jsx

 

That demo is also using our new useGSAP hook, see how simple and easy is to use GSAP with it? No more worrying about cleanup, useGSAP does it for you and super simple scoping for your selectors. Everything in one hook! You can learn more about it here:

https://gsap.com/resources/React

 

Finally you can use the Observer Plugin (or ScrollTrigger if you already have it in your app) in order to change the direction of the loop as shown in these demos:

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

 

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

 

Hopefully this helps.

Happy Tweening!