chairman

Thanks a lot!! I didn't know the stagger syntax had changed ??

Hi guys, Since I'm fairly new to javascript, I just want your opinion about my solution. Is it ok to do like this? I am trying to not make a too many intersection observers. Therefore I create the timelines based on the class names of the parent div's. Is it a performance killer? Hope this makes sense.

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

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?

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); }

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

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