How to make text move from left to right in a button

[tmusharraf]

I want to make this animation using GSAP or CSS, Please help me, how I can do it. 

 

 

[Cassie]

Hey there!

There's a great helper function in the docs for seamless looping

https://greensock.com/docs/v3/HelperFunctions#loop

[tmusharraf]

DEMO: https://stackblitz.com/edit/react-beah3w?file=src/App.js

 

Thank you. the problem is I'm not getting the way I want it to be. I shared a minimal demo. Hope you can check it and found what I'm doing wrong.

Problems:

On some screens space between first and third(last) is large. 

and they are not sync with background timeline.

 

I try to run the function, but in the demo its even not working. I don't know why, the problem mentioned are above.. I simply want something like the website "https://www.banky.io/" the animation you see in the footer section. 

 

I know you might be busy, you can write the code others wise just give me the idea like do this and that I'll write code by myself. Or can I can use something else like CSS, pure JS, React.js etc. for this type of animation. Thanks  

 

[tmusharraf]

On 12/17/2022 at 5:02 PM, Cassie said:

Hey there!

There's a great helper function in the docs for seamless looping

https://greensock.com/docs/v3/HelperFunctions#loop

Please check it: 

https://stackblitz.com/edit/react-beah3w?file=src/App.js

 

[GreenSock]

It looks like you exposed an edge case where the gsap.context() reverts incorrectly, but that's fixed in the upcoming release which you can preview at 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

In the meantime, you can simply clear out the transforms on the items manually using clearProps in the cleanup function like this: 

https://stackblitz.com/edit/react-werge2?file=src%2FApp.js

 

Sorry about the confusion there! This would only happen when there's a .fromTo() in a timeline and it has immediateRender: false and the playhead of the timeline is pushed forward all the way and then backward (that's what happens in the helper function). React calls your useLayoutEffect() TWICE, and that's why it was exposing this cleanup issue. It's an odd mix of annoying React behavior (double-call of useLayoutEffect()) and an edge case where context wasn't reverting that one part of the "from" correctly. 

[tmusharraf]

@GreenSock thanks 

 

Yes, I solved that issue now its working but they are not sync. can you please see what's the problem now? 
I think the problem is in the CSS or could be fixed by using the gsap.set(). 
 

I'm attaching a video so you can see the first issue was the issue on the top tight side of video:

 

 

[Cassie]

Hi there, your demos provided aren't working. Do you have a link to a working version?

[Cassie]

Here's a demo that might help?

See the Pen VwBwwjY?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock]

Yes, @tmusharraf, that's definitely a CSS/Layout/Logic issue, totally unrelated to GSAP. I'd recommend starting without any GSAP/animation, and just get your CSS setup properly so that things are lined up. Then introduce the animation. That'll be much simpler. 

 

You may actually want to just create two identical containers with all the text so that everything is perfectly synchronized (sitting on top of each other), and then wrap the TOP one inside another container element that has overflow: hidden and border-radius that'll basically act like a mask. Then you can just apply the same animation to both and they'll always be synchronized. Just an idea. Unfortunately, we just don't have the resources to provide free general consulting for logic/CSS/layout issues. These forums are for GSAP-specific questions (please read the forum guidelines). Good luck to you. 👍

[tmusharraf]

Thanks for the help @Cassie and @GreenSock. I solved it by using @Cassie and applying logic idea from the @GreenSock.

 

 

Thank you GSAP team you are just amazing ❤️ 

[JohnMatrix]

@tmusharraf you say you 'solved' the gap on the right side of the screen when the text is scrolling, can you please elaborate on how you 'solved it', I am facing the same issue. It would be beneficial to other future visitors to these forums and in searches.