Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
friendlygiraffe

Timeline loop not resetting

Go to solution Solved by Diaco,

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

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

Link to post
Share on other sites

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})
  • Like 1
Link to post
Share on other sites

 

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

Link to post
Share on other sites

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/

  • Like 1
Link to post
Share on other sites

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

  • Like 1
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.

×