Stagger Animation

[vanSk]

Hello,

I have a title in three words. Each word goes individually in a new line with a stagger.  So after that I want to hide this title and make visible button in the same position of the title. After a seconds I want return the first animation with the title and then the animation with the button and so on indefinitely. Thank you.
   

let title = document.getElementsByClassName('title');

 

let tll = new TimelineMax({ repeat: -1 });

 

tll.staggerFromTo(title, 1, {

x: -250,

y: 300,

}, {

x: 0,

stagger: 1,

ease: Sine.easeInOut

});

[ZachSaucier]

Hey vanSk,

 

You should be able to do this by adding a delay after the staggerFromTo that you're using there, then adding another animate to the timeline to show the button, and then it will loop indefinitely since you set the repeat to -1 on the timeline.

 

Is there a particular part of the process that you're running into trouble doing?

[vanSk]

On 8/16/2019 at 12:46 AM, ZachSaucier said:

Hey vanSk,

 

You should be able to do this by adding a delay after the staggerFromTo that you're using there, then adding another animate to the timeline to show the button, and then it will loop indefinitely since you set the repeat to -1 on the timeline.

 

Is there a particular part of the process that you're running into trouble doing?

Thank you, but I want run the title  after 1 second. I don't want to have delay in first animation. I want to have delay when the first stagger animation is complete, so I can show the button. 
Here my code:
 

      

let title = document.getElementsByClassName('title');

 

let tll = new TimelineMax({ repeat: -1 });

 

tll.staggerFromTo(title, 1, {

x: -250,

y: 300,

}, {

x: 0,

stagger: 1,

ease: Sine.easeInOut,

delay: 3

});

 

tll.staggerFromTo('.btn', 1, {

x: -250,

y: 200,

}, {

x: 0,

delay: 3,

ease: Sine.easeInOut

});

 

tll.to(title, 1, {

opacity: 0, ease: Linear.easeNone

})

[ZachSaucier]

You're closer, but I would recommend taking a closer look at the documentation to try and understand GSAP better. Especially focus on the delay property. The delay is added before the tween starts that the delay is declared in. 

 

You can set a delay on the initial state by adding the delay to the timeline.

 

Also if you don't have more than one button you can use a regular fromTo for the button instead of a staggerFromTo. 

 

One other note is that you can use the final parameter to declare where in the timeline you want the tween to start. So in the demo below I use "-=1" to start the button movement tween at the same time as the title fade out.

 

See the Pen dybXqLq?editors=0010 by GreenSock (@GreenSock) on CodePen