Looping Issue after Timline restart.

[Technics1210]

Hi,

 

i am on an animation which is like a fast train passing by and the suddenly stops.

 

This effect is made by repeating short tweens in a row and then easing out. After every tween i call a function which resets the start _x position of the image.

 

This effect is looking good on the first loop, but after the second loop it starts stuttering...

 

And i don't get it why...

 

Here is the code for

 

-Rolf

See the Pen wMwyBp by technics1210 (@technics1210) on CodePen

[PointC]

Hi Technics1210 ,

 

I took a slightly different approach to your train. It may make things easier for you.

 

See the Pen bEbvwP by PointC (@PointC) on CodePen

 

Hopefully this helps. Happy tweening.

[Technics1210]

Thank you PointC,

 

great - yes the crazy train seems working, so i have to make a new Timeline for this animation. It is only part of a more complex animation

 

Nevertheless, i don't understand why after restart / replay the timeline (see first post) starting to stutter and is not equal to the first play of the timeline, although there is no delay or something changed between the tweens before replay.

[Diaco]

Hi Technics1210 

 

i don't know that what's your scenario , but pls use .fromTo() tweens instead of reset position with onComplete() .

 

so , your code is this :

var tl = new TimelineLite();

tl.fromTo("#stuhl09",0.2,{ x:beginX },{ x:endX,ease:Linear.easeNone,repeat:7 })
  .fromTo("#stuhl09",2,{ x:beginX },{ x:endX,ease:Power3.easeOut })
  .add(function(){ tl.restart() },'+=12');

See the Pen PZYLMo by MAW (@MAW) on CodePen

[Technics1210]

Hi Diaco,

 

thank you - 

that is exact what i need - i thought "repeat" was only a TimeLineMax feature - due to filesize (it is part of an banner ad) i always user TimeLineLite...

 

But the "fromTo" i had not yet on my mind and seems way more elegant. Great.

 

Nevertheless - i wonder why it worked in my example on the first time but not on the second replay...