Blinking staggerFromTo

[clf]

Hello.

Sorry for my dumb question, but why does that code leads to blink the logo at the start moment 

gsap.timeline()
.staggerFromTo(logo, 3, {x:300, opacity:0,}, { x: 0, opacity: 1})
.staggerFromTo(logo, 3, {x:0, opacity:1}, {x:-300, opacity:0 });

but that doesn't

gsap.timeline()
.staggerFromTo(logo, 3, {x:300, opacity:0}, { x: 0, opacity: 1})
.staggerTo(logo, 3, {x:-300, opacity:0})

#logo has default opacity:0 in css

 

Its' better to see start blink directly in codepen, because in window below that does't happen on rerun

 

Thanks for any advice.

See the Pen aKqwvJ by clf (@clf) on CodePen

[GreenSock]

I don't see any blink. I've rerun the animation like 10 times. I must be missing something obvious. 

 

But keep in mind that .fromTo() animations have immediateRender: true by default, thus they force the "from" state to render right away. You've got two of those back to back on the same element. So the 2nd one runs last, thus its "from" state will be what you see until the very next tick which is when the first one renders. So it makes sense that the way you're setting things up isn't correct unless you set immediateRender: false on that second one but there's really no reason to use a fromTo() instead of a to(). 

 

Also, why are you using the legacy methods? 

// bad/old
gsap.timeline()
  .staggerFromTo(logo, 3, {x:300, opacity:0}, { x: 0, opacity: 1})
  .staggerTo(logo, 3, {x:-300, opacity:0})

// good
gsap.timeline()
  .fromTo(logo, {x:300, opacity:0}, { x: 0, duration: 3, opacity: 1})
  .to(logo, {x:-300, duration: 3, opacity:0})

Migration guide:

 

And why are you using a stagger method when you only have one element (and you didn't define a stagger value)? Staggers are only useful when you have more than one target.

 

I hope that helps. 

[clf]

Thanks for the clarification.

It's definitely deffer to immediateRender. Here is an explanation of that situation.

I used legacy method, because had a break with coding, and did not focus on the beauty of the code in gsap3 🤪

And according to staggers. I want to animate each letter of <div> text that dynamically creating with injecting <span class="letter"> to innerHTML to achive the same result as animate.css do with "pulse animation". So for appearing every letter i have to use stagger. And the pulse each letter separately.

But i ran into one problem. If i do something like this

function animate(){
  letters.forEach((letter,i) => {
      let t = gsap.to([letter[i],letter_stroke[i]], { duration: 0.5, scale: "random(1,1.05)", repeat:-1, yoyo: true});
  });
}

and at some moment i replace letters with new created, should i remove\clean every created "tween" for previous letters? 

let arr = [];

function animate(){
  letters.forEach((letter,i) => {
    let t = gsap.to([letter[i],letter_stroke[i], { duration: 0.5, scale: "random(1,1.05)", repeat:-1, yoyo: true});
    arr.push(t);
  }
}
...

//replace letters
....
arr.forEach(t=>t.kill()) //somehow kill previous
animate();

Because i feel that i have a memory leak. Or maybe GSAP understands that there is no object in a DOM and kills infinite tweens by itself?

 

Thanks

 

 

[GreenSock]

This looks wrong to me: 

letters.forEach((letter,i) => {
  let t = gsap.to([letter[i],letter_stroke[i]], { ... });
});

Why are you doing letter[i] when you're inside of a .forEach()? Wouldn't it just be letter? 

 

22 hours ago, clf said:

Or maybe GSAP understands that there is no object in a DOM and kills infinite tweens by itself?

No, GSAP isn't just for DOM elements. It animates literally anything. So no, it doesn't kill infinite tweens by itself. You could attach it to the element itself if you'd like - that makes it pretty easy.

letters.forEach((letter,i) => {
  if (letter.tween) {
    letter.tween.kill(); // kill the old one!
  }
  letter.tween = gsap.to(letter, ...);
});

If you still need help, please make sure you include a minimal demo.