Simple delay question

[amigoface]

Hi,

 

it's a obviousely a simple thing, but i cannot figure out how to at the moment

 

in the example the image animation start only after the first ends, i want it to start let's say 0.5 second after the first begins

 

thanks for your help .

See the Pen LGMBEm by anon (@anon) on CodePen

[Jonathan]

Hello amigoface, and Welcome to the GreenSock forum!

 

Did you want the animation to do something like this?

 

See the Pen yeGxOj by jonathan (@jonathan) on CodePen

 

There is really no need to use the add() method in your case. The GSAP add() method should only be used when your nesting timelines into a master timeline.

 

So instead of this:

tl.add(TweenMax.staggerFrom(".td1 p", 1, {
   x: -50,
   opacity: 0,
   ease: Power4.easeOut
}, 0.3));

You should do this:

// without the add() method
tl.staggerFrom(".td1 p", 1, {
   x: -50,
   opacity: 0,
   ease: Power4.easeOut
}, 0.3);

To make a tween move 0.5 seconds after the previous tween then you would use "+=0.5" instead of the "-=0.5", like you were using. The relative value -= will make it so it runs 0.5 seconds before the previous tween ends.

 

Check out these following video tuts by GreenSock

 

How to sequence your timeline and tweens:

 

 

And the GSAP position parameter which explains tween offsets and relative position of tween offsets

 

http://greensock.com/position-parameter

 

 

I hope this helps!

[amigoface]

yeah actually it helps a lot

 

thanks man !