siva nargana

how to loop entire tweenmax animations with onComplete callbacks

Recommended Posts

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(){}});
    }});
  }});
}});

Share this post


Link to post
Share on other sites

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) 

 

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

Share this post


Link to post
Share on other sites

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.

:)

 

  • Like 5

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.