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

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.