how to loop entire tweenmax animations with onComplete callbacks

[siva nargana]

how to repeat this kind of callbacks based animation, I cant repeat this entire animation, each tween start based on callback please answer this problem

 

TweenMax.to(".div1",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){
  TweenMax.to(".div2",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){
    TweenMax.to(".div3",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){
      TweenMax.to(".div4",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){}});
    }});
  }});
}});

See the Pen XELdmy by sivanargana (@sivanargana) on CodePen.

[Sahil]

If I understand correctly you just need to use staggerTo tween instead of using callbacks, take a look at docs for more information or check the video,

 

https://greensock.com/docs/TweenMax/static.staggerTo()

 

 

See the Pen MVMbOz?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

Does that help?

[siva nargana]

staggerFrom or staggerTo tweens only for  same class & same animation type,  but I need  different animations  and different class names with callbacks

 

1st tween run animation -1 (move left to right) on complete -- >

2nd tween run animation -2 (move right to bottom) on complete -- >

3rd tween run animation -3 (move bottom to left) 

 

See the Pen XELdmy by sivanargana (@sivanargana) on CodePen.

 this entire animation should be a repeat is it possible ??

[PointC]

Is there any reason you're not using a timeline for this?

 

TweenLite.defaultEase = Linear.easeNone;
var tl = new TimelineMax({repeat:-1});
tl.from(".div1", 0.5, {x:100});
tl.to(".div2", 0.5, {y:100});
tl.from(".div3", 0.5, {scale:2});
tl.from(".div4", 0.5, {rotation:360});

 

More info:

https://greensock.com/docs/TimelineMax

 

Also check out the position parameter:

https://greensock.com/position-parameter

 

Happy tweening.