Show and hide each element with stagger

[Adel Kamel]

Hello everyone,

I hope that you all are ok. I'm having difficulty creating an animation and I'm asking for your help.
I need to display messages one after the other.

I used the stagger method but the previous message does not disappear 😕

Message 1 is displayed but it does not disappear to make way for Message 2.

I hope you can help me.

Adel

See the Pen poQPRLa by adelarmis (@adelarmis) on CodePen

[mvaneijgen]

Your demo was kinda big and loaded lots of things! I thing GSAP was getting loaded like 3 times and an old version of that. I removed most unnecessary code so that we can just focus on the demo, it might look a bit different. The beauty of Codepen is that you can just write html css and js and don't have to worry about your live setup. 

 

I would recommend checking out the stagger docs https://gsap.com/resources/getting-started/Staggers you'll see that opacity is not a stagger property this is only something a tween can have. Also the stagger is for the current tween, so if you also want things to animate out you'll have to build that animation. 

 

So you need to create an extra tween that animates the text out and also set a stagger to that. Then with some position parameter magic you can have that tween start at the same time as the previous tween, but have it wait for the tween to complete first. 

 

I've also changed your CSS, so that the text is already visible on page load then we can just animate .from() an opacity: 0 and GSAP will animate to the default 1. If you're are worried about flash of unstyled content (FOUC) check out https://gsap.com/resources/fouc/

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them!

I would recommend taking a look at the awesome getting started guide https://gsap.com/resources/get-started/  

 

Hope it helps and happy tweening! 

 

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

[Adel Kamel]

Hello, thanks a lot for your help