Repeating tween extends the timeline

[Dimas 0 Likes (Newbie)]

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

 intro_tl
  .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' )
  .insert([
   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')
  .insert([
   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')
  .insert([
   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() );

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

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,

Cheers,

Rodrigo.