Solution blizve0 Posted May 30, 2022 Solution Share Posted May 30, 2022 Hi, I'm Trying to Create Something Like this preview https://www.awwwards.com/inspiration/broadwick-live I have an array of words which i would like to show on screen using gsap setText or set innerHtml on the Screen. I want the loop to run infinitely and switch words every 0.2 Seconds. I cannot get it to work, can somebody help me with this ? See the Pen bGLvBjm by blitzve0 (@blitzve0) on CodePen Link to comment Share on other sites More sharing options...
blizve0 Posted May 30, 2022 Author Share Posted May 30, 2022 Got it by force using javascript, still hope to find a better and faster implementation Link to comment Share on other sites More sharing options...
PointC Posted May 30, 2022 Share Posted May 30, 2022 I think the easiest thing would be to put them on a timeline and set repeat to infinite. Note: I had to use a delayedCall as the .switch-text element wasn't ready. See the Pen e255ee55bdaad00c15dfe941b6905962 by PointC (@PointC) on CodePen You could also just use a function that calls itself onComplete of each word. Lots of ways to do it really. Happy tweening. 2 1 Link to comment Share on other sites More sharing options...
blizve0 Posted May 31, 2022 Author Share Posted May 31, 2022 Hi this is good, exactly what i needed, delayedCall won't be needed as I'll implement in a useEffect hook 1 Link to comment Share on other sites More sharing options...
fhauck Posted December 9, 2022 Share Posted December 9, 2022 Hey All, i am developing a new website at the moment and need the same effect as the above one. I implemented it as in your examples and everything works great except one thing: If i have a number in my array, it counts up from zero I duplicated @PointC CodePen to show you a example. Maybe you have an idea how to fix this? See the Pen vYrMBPd by fhauck (@fhauck) on CodePen Thanks! Link to comment Share on other sites More sharing options...
Carl Posted December 9, 2022 Share Posted December 9, 2022 ha, that's a pretty funny oddity. I haven't seen that before. I switched to using a set() (no animation) an I used the position parameter instead of duration. feel free to change the duration variable var duration = 1; gsap.delayedCall(1, () => { let textTimeline = gsap.timeline({ repeat: -1 }); array.forEach((obj, i) => { textTimeline.set(".switch-text", { innerHTML: array[i] }, i * duration); }); }); See the Pen BaVENgv?editors=0010 by snorkltv (@snorkltv) on CodePen 2 Link to comment Share on other sites More sharing options...
GreenSock Posted December 9, 2022 Share Posted December 9, 2022 Yep, GSAP is doing what it's supposed to in terms of animating between two complex strings where at least one (start or end) contains a number inside the string. @Carl offered a great solution. There are many ways to accomplish that. I hope that helps! Link to comment Share on other sites More sharing options...
fhauck Posted December 14, 2022 Share Posted December 14, 2022 @Carl That works great! Thanks for your help, really appreciate it 🙏 @GreenSock Thanks for the explanation 🙂 1 Link to comment Share on other sites More sharing options...
thousandlines Posted December 20, 2022 Share Posted December 20, 2022 I'm working on a similar animation and have looked at this implementation, however, i've noticed that the last item in the array (in these Codepen examples a "!") is not being shown in the loop. Do you see this behaviour too @Carl ? 1 Link to comment Share on other sites More sharing options...
Carl Posted December 20, 2022 Share Posted December 20, 2022 Ah, good catch @thousandlines The issue was that the text was displayed for 0 seconds and then instantly the timeline would repeat. The solution is to add a repeatDelay to the timeline so that the last item has time to be seen. Updated Demo See the Pen QWBWeEV?editors=1010 by snorkltv (@snorkltv) on CodePen 2 Link to comment Share on other sites More sharing options...
thousandlines Posted December 20, 2022 Share Posted December 20, 2022 That's great, thank you for working it out and explaining the cause of the issue so quickly! I'm one of your course subscribers and am really enjoying working through it. 2 Link to comment Share on other sites More sharing options...
Cassie Posted December 20, 2022 Share Posted December 20, 2022 There's so much love for your courses in the forums atm Carl - it's so lovely to see! 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