[Performance question. Is this ok?]

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

[Performance question. Is this ok?]

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.  

See the Pen PooyGaK by ekkaks (@ekkaks) on CodePen

[Text rotator]

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

[Text rotator]

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?

[Text rotator]

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

 

[Text rotator]

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

[Text rotator]

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