React.js Continuous horizontal text animation

[Forpee]

Hey everybody,

I am a React developer and I am struggling to implement codepen examples into my react code...

I say this because I have seen multiple codepen examples on how to create a continuous loop of text going across the screen

What I am struggling to do in react is to clone the text element and append it to the main div (this is what i think you guys are doing in the examples)

Because I struggle with migrating codepen code to react code the best I could do was to create a codesandbox with my code (I'm using the npm package react-gsap)

https://codesandbox.io/s/dazzling-cloud-8lsrm

 

So as you can see Im struggling to make the text continuous because as it moves there is an empty part at the beginning, instead of continous text

 

Any specific React help would be greatly appreciated(btw i'm using next js)

[mikel]

Hey @Forpee

 

Here is a thread using react and gsap modifiers

 

 

Does that help?

 

Happy looping ...

Mikel

[BrianCross]

I just quickly peeked at your code on my phone and one thing I see is you’re not actually cloning the DOM node. You’re just setting clone to point to the existing node. Use const clone = cloneRef.current.cloneNode(true); to clone the node and its child text node. 

[Rodrigo]

@BrianCross Is right, you only have one element in your marquee, so is kind of hard to make it work like that.

 

Also you're not including the modifiers plugin in order to create the endless animation. I made a simple example for this:

 

https://codesandbox.io/s/gsap-endless-marquee-l5tv4

 

Finally, I haven't used the react-gsap package, so I'm using the regular approach to use GSAP in a React project. Since that is not a GSAP official project we don't have enough time to offer support on how to use it correctly, but based on what I can see, it shouldn't be too complicated. Although I simply prefer the traditional way.

 

Happy Tweening!!!

[Forpee]

Thanks so much guys!

[Forpee]

Hey @Rodrigo

 

Your code works like a charm, but there's still something I cant figure out from it.

In the website https://takeboost.com/ if you scroll all they way to the bottom there is a  marquee there which has no gaps between the texts. And the texts are on a single line.

The reason I say this is because when I tried to add more text elements to the marqueeTexts array the texts began to overlap each other and also when I tried to remove the gaps by dividing screen width by 5 in the return statement the texts began to go on multiple lines instead of a single line in the example

  const marqueeInitialSet = () => {
    gsap.set(marqueeElements.current, {
      xPercent: -100,
      x: function (index) {
        return (screenWidth / 2) * index;
      },
    });
  };

Any help would be appreciated to try get that marquee effect on https://takeboost.com/ 

[Rodrigo]

Hi,

 

Can you provide a reduced live editable sample in codesandbox? With the information you provide is a bit hard to pinpoint what the problem could be.

 

The only guess I can take is that you're adding more elements dynamically and that is messing up the current set up. For that you'll have to create a separate useEffect hook where you create the initial setup and the endless animation when the amount of text elements change.

 

Happy Tweening!!!