Show word after word without transition

[Black Ducas]

Here my code:

 

 

I need to hide a word at the end of its tween. I have to show one word per time. Word 1 appears and stays for 1s, then it disappears and Word 2 appears and stays for 1s, and so on. Without any transition between them. Is there a way? Maybe my approach is wrong? Thanks

See the Pen poQxqxL by gooogooo (@gooogooo) on CodePen

[Rodrigo]

Hi,

 

You have to setup the leave part using roughly the same configuration with stagger:

let tl = gsap.timeline({
  repeat: -1,
  repeatDelay: gapTime,
});
tl.set(boomWords.words, {
  autoAlpha: 1,
  stagger: gapTime
})
.set(boomWords.words, {
  autoAlpha: 0,
  stagger: gapTime
}, gapTime);

 

Finally I'd recommend you to watch these videos @Carl made on the subject:

 

 

Hopefully this helps.

Happy Tweening!

[Black Ducas]

Yeah! It helped a lot.

What means the last gapTime

.set(boomWords.words, {
  autoAlpha: 0,
  stagger: gapTime
}, gapTime); // <====THIS

What if I had to add another animation after? Like this

 

// Previous code, then:
tl.set('.last-boom-word', {
  autoAlpha: 1,
  scale: 1.2,
  repeat: 3,
})

It doesn't start. Here too I don't want any transition (if I use .to in place of .set it works)

[mvaneijgen]

Ha, I think @Rodrigo ment to sent you two videos, but by mistake pasted the same video twice. And the second video has all the goodies! Check it out here below.

 

 

Here is a fork of your pen with the changes from @Carl's video. I've also changed your .set() tweens to a .to() with an ease of steps(1). (see more eases here https://greensock.com/docs/v3/Eases) I feel .to() is more flexible if you want to change the animation in the future and a .set() has an other use case in my opinion, but if it works it works. I just wanted to show you an other way. Hope it helps and happy tweening! 

 

See the Pen bGQQVxb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Black Ducas]

@mvaneijgen thanks for your improvement! I'm having hard times adding a separate animation at the end of one cycle. Check my previous post. Have you a suggestion?

[mvaneijgen]

Do you have a link to a demo with the latest version you have?