Timeline loop not resetting

[friendlygiraffe 11 Likes (Newbie)]

Hi,

 

I’m having problems re-initialising the properties of a Timeline (Codepen url attached)

 

On start, the plane should animate in form the left (-300)

 

This only seems to work on the initial playthru. 

 

i've looked at Clearprops, invalidate() and a few other ideas, but nothing seems to fix it so far.

 

Any suggestions welcome

 

Thanks

 

 

 

See the Pen GoQXEo by friendlygiraffe (@friendlygiraffe) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi friendlygiraffe 

 

pls fix by remove negative position parameter :

tl.from(".arrow_top", 3, {x: "-=300", autoAlpha:0, ease:Power3.easeOut})
  .to(".arrow_top", 1.5, { scale:1, x:"-=345", rotation:"-=34",y:"+=33", ease:Power4.easeIn})

[friendlygiraffe 11 Likes (Newbie)]

 

Hi friendlygiraffe 

 

pls fix by remove negative position parameter :

tl.from(".arrow_top", 3, {x: "-=300", autoAlpha:0, ease:Power3.easeOut})
  .to(".arrow_top", 1.5, { scale:1, x:"-=345", rotation:"-=34",y:"+=33", ease:Power4.easeIn})

 

I see, so the issue was the conflicting x properties? Thanks

[Diaco 1,948 Likes (Superhero)]

yep , but if you need to use negative position parameter for your second tween , you can set overwrite propery :

tl.from(".arrow_top", 3, {x: "-=300", autoAlpha:0, ease:Power3.easeOut})
    .to(".arrow_top", 1.5, { scale:1, x:"-=500", rotation:"-=34",y:"+=33", ease:Power4.easeIn, overwrite:0 },'-=0.5')

pls check the overwrite in the Doc : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

[friendlygiraffe 11 Likes (Newbie)]

yep , but if you need to use negative position parameter for your second tween , you can set overwrite propery :

tl.from(".arrow_top", 3, {x: "-=300", autoAlpha:0, ease:Power3.easeOut})
    .to(".arrow_top", 1.5, { scale:1, x:"-=500", rotation:"-=34",y:"+=33", ease:Power4.easeIn, overwrite:0 },'-=0.5')

pls check the overwrite in the Doc : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

That's the fix I was looking for. Thanks very much Diaco