Jump to content
Search Community

Repeating tween extends the timeline

Dimas test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

It seems that with out the repeating tweens the timeline will report the total duraiton as "3" which is accurate .. but when including the repeating tweens the timeline reports it as "1000000000000" .. which prevents me from using the append method, is there a way around this?


Here is the code


 var intro_tl = new TimelineLite({onComplete:initScrollAnimations});

  .addLabel('outer-ring', 0)
  .addLabel('ring1', .5)
  .addLabel('ring2', 1)
  .addLabel('ring3', 1.5)
  .from( $('#db-ring'), 1.5, { ease:Quad.easeIn, css:{opacity: 0} }, 'outer-ring' )
   TweenMax.from( $('#db-outer-ring1'), 1.5, { ease:Quad.easeIn, css:{opacity:0} } ),
   //TweenMax.from( $('#db-outer-ring1'), 20, { repeat:-1, ease:Linear.easeNone, css:{rotation:360} } )
  ], 'ring1')
   TweenMax.from( $('#db-outer-ring2'), 1.5, { ease:Quad.easeIn, css:{opacity:0} } ),
   //TweenMax.from( $('#db-outer-ring2'), 40, { repeat:-1, ease:Linear.easeNone, css:{rotation:-360} } )
  ], 'ring2')
   TweenMax.from( $('#db-outer-ring3'), 1.5, { ease:Quad.easeIn, css:{opacity:0} } ),
   //TweenMax.from( $('#db-outer-ring3'), 30, { repeat:-1, ease:Linear.easeNone, css:{rotation:360} } )
  ], 'ring3')

  console.log( intro_tl.totalDuration() );

Link to comment
Share on other sites



The reason is because your Tweens have a -1 repeat value, which means that the Tweens will repeat endlessly, therefore the duration of your timeline is infinite and that amount of a trillion is just given by the code I guess. I don't know if that is what you want to achieve, I mean if you want that the tweens in your timeline repeat for ever you can use the repeat in the Timeline declaration, but also you have to consider that repeat is a method of TimelineMax, like this:


var intro_tl = new TimelineMax({onComplete:initScrollAnimations, repeat:-1});


Although this will defy the purpose of having an onComplete call because basically your timeline will never be completed, therefore your function will never be executed, so you need to determinate how many times you want your tweens or your timeline to repeat, and assign that number in the declarations. In that scenario it may help to use the duration property as a setter, so it won't matter how long your tweens are, if you declare how long your Timeline should be, it will automatically adjust the time scale of the entire timeline to last the time you're giving.


Hope this helps,



  • Like 1
Link to comment
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.
  • Create New...