chairman Posted November 10, 2019 Share Posted November 10, 2019 Hi Im trying to make a simple text-rotator. But I'm not sure if I should use StaggerFrom og make multiple timelines. How do I make the whole animation restart after it reaches the last word See the Pen YzzjPQQ by ekkaks (@ekkaks) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 10, 2019 Share Posted November 10, 2019 Hey chairman and welcome to the GreenSock forums. There are several ways to do this. I would recommend making use of sub-timelines to make it a little easier to keep track of. Then I would add those timelines to the master timeline at your calculated delay time. const words = document.querySelectorAll('.rotator > span') let main = new TimelineMax({repeat: -1}); for (let i = 0; i < words.length; i++) { let delay = i; let wordTL = new TimelineMax(); wordTL.from(words[i], 1, { y: '-100%', opacity: 0 }); wordTL.to(words[i], 1, { y: '100%', opacity: 0}); main.add(wordTL, delay); } However, the above leaves a gap between the last word and the first word. In order to get around that, one method is to duplicate the word in your HTML and then do the following: for (let i = 0; i < words.length; i++) { let delay = i - 1; let wordTL = new TimelineMax(); if(i !== 0) { wordTL.from(words[i], 1, { y: '-100%', opacity: 0 }); } if(i !== words.length - 1) { wordTL.to(words[i], 1, { y: '100%', opacity: 0}); } main.add(wordTL, delay); } See the Pen XWWBbQZ?editors=0010 by GreenSock (@GreenSock) on CodePen In the new GSAP 3, you would just replace new TimelineMax with gsap.timeline(). 1 Link to comment Share on other sites More sharing options...
chairman Posted November 10, 2019 Author Share Posted November 10, 2019 Hi ZachSaucier Thanks a lot. This was exactly what I was trying to achieve. I will also try to use the GSAP 3 syntax. This is my second day of GSAP'ing, so I'm still just on the copy/paste code level. Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 10, 2019 Share Posted November 10, 2019 Another side note is that instead of using y: '100%' you could use GSAP's yPercent instead: yPercent: 100. Link to comment Share on other sites More sharing options...
chairman Posted November 11, 2019 Author Share Posted November 11, 2019 Thank you again. I've been playing a bit around with the code. But can you explain to me like I am 5 what this line does if(i !== words.length - 1) { If the word is not equal to number of words minus 1? I know it will skip the first line but its still a bit confusing to me I tried to upgrade to 3.0.1 but my code generates a gap in the middle of the animation. I cant make a codepen because I cant add gsap 3.0.1 as a dependency and the CDN isn't working. I get an ngix error 404: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js Here is my code 3.0.1: const words = document.querySelectorAll('.rotator > span') let main = gsap.timeline({repeat: -1}); for (let i = 0; i < words.length; i++) { let delay = i - 1; let wordTL = gsap.timeline(); if(i !== 0) { wordTL.from(words, 1, { y: '-100%', opacity: 0, ease: 'power2.out' }); } if(i !== words.length - 1) { wordTL.to(words, 1, { y: '100%', opacity: 0, ease: 'power2.out' }); } main.add(wordTL, delay); } Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 11, 2019 Share Posted November 11, 2019 4 hours ago, chairman said: can you explain to me like I am 5 what this line does if(i !== words.length - 1) { If the word is not equal to number of words minus 1? That's exactly what it is! The -1 is because arrays are 0 indexed. So if you have an array with 3 elements, the position of the last one is actually 2, not 3. So it's checking to see if it's the last element in the array. 4 hours ago, chairman said: I cant add gsap 3.0.1 as a dependency and the CDN isn't working. I get an ngix error 404: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js Yes, CDNJS has been very slow in updating unfortunately. We're waiting on them. You can use the GSAP 3 beta file in the mean time. I went ahead and loaded in the demo below. 4 hours ago, chairman said: I tried to upgrade to 3.0.1 In your GSAP 3 code, you have words as your target for the tweens. It needs to be the specific element (target) that you're wanting to animate in that loop, so words instead. See the Pen OJJwQrL?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
chairman Posted November 11, 2019 Author Share Posted November 11, 2019 I see. thanks for the explanation When I look at your codepen, I think there is still a gap after "dolor". Is it possible to shorten the delay before the animation loops? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 11, 2019 Share Posted November 11, 2019 16 minutes ago, chairman said: I think there is still a gap after "dolor". Is it possible to shorten the delay before the animation loops? Oops, you're right. Sorry I didn't wait for it to finish Busy day with GSAP 3 stuff. Here ya go. See the Pen OJJwEpq?editors=0010 by GreenSock (@GreenSock) on CodePen Side note, you should put the duration in the vars parameter in GSAP 3 like I did in the demo above. 3 Link to comment Share on other sites More sharing options...
chairman Posted November 11, 2019 Author Share Posted November 11, 2019 Thanks. Its helping me a lot. I'm fairly new to javascript. So seeing these if/else combinations is really helpful for me because they open up new ways of combining my animations Link to comment Share on other sites More sharing options...
heyitsA Posted September 27, 2020 Share Posted September 27, 2020 Hello! I was exactly looking for this, but it gives me a weird flickering bug on chrome. Is it outdated? Here is the video: https://streamable.com/erd5tz Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 28, 2020 Share Posted September 28, 2020 @heyitsA I can see what you're showing now. It's a bug in the latest beta version of GSAP. Just switch out for the latest live version (3.5.1) and it will work fine. We'll get the beta fixed as well 1 Link to comment Share on other sites More sharing options...
heyitsA Posted September 28, 2020 Share Posted September 28, 2020 thanks @ZachSaucier I was getting crazy trying to figure out the error haha Link to comment Share on other sites More sharing options...
GreenSock Posted September 28, 2020 Share Posted September 28, 2020 Sorry about that - it should be fixed now. Thanks for pointing it out. 2 Link to comment Share on other sites More sharing options...
glenn_pot Posted April 5, 2021 Share Posted April 5, 2021 Hi @ZachSaucier, I added to this a little to allow for a smooth transition between words if the rotator is embedded in a sentence, which I think works well. See the Pen ZELyPvN by glenn_pot (@glenn_pot) on CodePen How would I slow the whole thing down? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 5, 2021 Share Posted April 5, 2021 44 minutes ago, glenn_pot said: How would I slow the whole thing down? You could change the duration of the tween inside of the loop. Or use .timeScale() on the timeline. Also I noticed you used the old formatting for duration of the tween that you added. We recommend including the duration inside of the vars parameter so that you can make use of GSAP's defaults functionality. 2 Link to comment Share on other sites More sharing options...
glenn_pot Posted April 8, 2021 Share Posted April 8, 2021 Thanks @ZachSaucier! See the Pen ZELyPvN by glenn_pot (@glenn_pot) on CodePen 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