Forpee Posted April 3, 2021 Share Posted April 3, 2021 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) Link to comment Share on other sites More sharing options...
mikel Posted April 3, 2021 Share Posted April 3, 2021 Hey @Forpee Here is a thread using react and gsap modifiers Does that help? Happy looping ... Mikel 3 Link to comment Share on other sites More sharing options...
BrianCross Posted April 3, 2021 Share Posted April 3, 2021 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. 4 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted April 3, 2021 Solution Share Posted April 3, 2021 @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!!! 4 Link to comment Share on other sites More sharing options...
Forpee Posted April 4, 2021 Author Share Posted April 4, 2021 Thanks so much guys! Link to comment Share on other sites More sharing options...
Forpee Posted April 28, 2021 Author Share Posted April 28, 2021 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/ Link to comment Share on other sites More sharing options...
Rodrigo Posted April 28, 2021 Share Posted April 28, 2021 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!!! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now