TweenMax.staggerTo and staggerForm issue

[idarfan 0 Likes (Newbie)]

The first roll of the box effect is falling down, and the second roll of box effect is floating up. It looks like only second roll of texts has been done. How can I fix this problem?

 

and how do I mark the box begin postion

See the Pen VvvezK by idarfan (@idarfan) on CodePen

[MindGamer 34 Likes (Newbie)]

You have two tweens happening simultaneously.  You either need to use a timeline to start the second tween after the first one finishes...  or use a delay of greater than 2 on your second tween.

[Diaco 1,995 Likes (Superhero)]

Hi idarfan 

 

pls try like this , you can change repeatDelay to make your desired effect  :

TweenMax.staggerTo(".box",2,{rotation:360,y:300,yoyo:true,repeat:1,repeatDelay:2},0.5);

See the Pen Gppqaq by MAW (@MAW) on CodePen

[Ihatetomatoes 325 Likes (Leader)]

Hi idarfan,

I've created a CodePen showing you a few options - 

See the Pen 1462ef622d1488e3c956bbdddb6f39fb by ihatetomatoes (@ihatetomatoes) on CodePen

 

As MindGamer mentioned, your TweenMax staggerTo and staggerFrom tweens are running at the same time, giving you the wrong result.

 

The best way would be to use a timeline:

// Timeline controlling boxes up/down
var tl = new TimelineMax();
tl.staggerTo(".box", 2, {rotation:360, y:300}, 0.5)
  .staggerTo(".box", 2, {rotation:0, y:0}, 0.5);

By default the starting position of the elements is the position defined in the stylesheet. In other words if you would want to swap the order of your animations, you could use something like this:

// Timeline controlling boxes down/up
var tl = new TimelineMax();
tl.staggerFrom(".box", 2, {rotation:360, y:300}, 0.5)
  .staggerTo(".box", 2, {rotation:360, y:300}, 0.5);

Explore the code in the CodePen, I've commented out some of the code snippets.

 

Cheers

Petr

[idarfan 0 Likes (Newbie)]

hello Diaco thank you. its worked. 

Hi idarfan 

 

pls try like this , you can change repeatDelay to make your desired effect  :

TweenMax.staggerTo(".box",2,{rotation:360,y:300,yoyo:true,repeat:1,repeatDelay:2},0.5);

See the Pen Gppqaq by MAW (@MAW) on CodePen