Periyasamykrishnan

TimelineLite Repeat problem

Recommended Posts

<script type="text/javascript">
        
        window.onload = function() {
            timeline();
             
                 
        };

        function timeline() {
            var timers = 0.15;
            var Tween = new TimelineLite(); 
            
            Tween.add(TweenLite.to(['.logo'], 0.5,  { autoAlpha: 1 }), timers);
            
            timers += 0.2;
            Tween.add(TweenLite.to(['.img_1'], 0.3,  { autoAlpha: 1, left:-1, ease: Power4.easeOut }), timers);
            
            timers += 0.2;
            Tween.add(TweenLite.to(['.img_2'], 0.3,  { autoAlpha: 1, bottom:-1, ease: Power4.easeOut }), timers);
            
            timers += 0.2;
            Tween.add(TweenLite.to(['.img_3'], 0.3,  { autoAlpha: 1, top:-1, ease: Power4.easeOut }), timers);
            
            timers += 0.2;
            Tween.add(TweenLite.to(['.img_4'], 0.8,  { autoAlpha: 1, scale: 1,ease: Elastic.easeOut.config(1, 0.5) }), timers);
            Tween.add(TweenLite.to(['.ml'], 1,  { autoAlpha: 1, bottom:-1, ease: Elastic.easeOut.config(1, 0.6) }), timers);
            
            timers += 0.2;
            Tween.add(TweenLite.to(['.img_5'], 0.3,  { autoAlpha: 1, left:-1, ease: Power4.easeOut }), timers);
            
            timers += 0.2;
            Tween.add(TweenLite.to(['.img_6'], 0.3,  { autoAlpha: 1, bottom:-1, ease: Power4.easeOut }), timers);
             
            timers += 0.5;
            Tween.add(TweenLite.to(['.cta'], 0.5,  { autoAlpha: 1 }), timers);
            Tween.add(TweenLite.to(['.cta:hover'], 0.5,  { autoAlpha: 1 }), timers);
             
             timers += 2;
            Tween.add(TweenLite.to(['.logo','.ml','.img_1','.img_2','.img_3','.img_4','.img_5','.img_6','.cta','.cta:hover'], 0.1,  { autoAlpha: 0 }), timers);
            
           

            console.info('Total times: '+timers);
        }
        
        

        
        
    </script>

Share this post


Link to post
Share on other sites

I'm not sure what the question is here. Are you asking how to repeat a TimelineLite? If that's what you need, please try this:

 

var Tween = new TimelineLite({
  onComplete: function() {
    this.restart();
  }
});

 

Hopefully that helps. Happy tweening.

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites
On 7/11/2018 at 8:30 PM, PointC said:

I'm not sure what the question is here. Are you asking how to repeat a TimelineLite? If that's what you need, please try this:

 


var Tween = new TimelineLite({
  onComplete: function() {
    this.restart();
  }
});

 

Hopefully that helps. Happy tweening.

how to add delay on  oncomplete function

 

Share this post


Link to post
Share on other sites
4 hours ago, Periyasamykrishnan said:

how to add delay on  oncomplete function?

 

Two ways,

1. Add empty tween at the end of Timeline,

 

timeline.to({}, delayTime, {});

 

2. Use delayedCall inside onComplete function,

 

var Tween = new TimelineLite({
  onComplete: function() {
    TweenMax.delayedCall(delayTime, function(){
    	this.restart();
    });
  }
});

 

  • Like 1

Share this post


Link to post
Share on other sites

Note: TimelineMax allows you to set a repeatDelay value too, in case that's helpful. 

 

new TimelineMax({repeat:-1, repeatDelay:3});

 

And if you must use TimelineLite, keep in mind that restart() accepts a parameter that'll honor any delay as well, so you could do:

var tl = new TimelineLite({delay:3, onComplete:function() {
  tl.restart(true);
}});

//and if you want the first iteration to start immediately, you could just do:
tl.play(0);

 

Happy tweening!

  • Like 4

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.