Jump to content
GreenSock

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

GSAP timeline resets items to previous state before playing

Go to solution Solved by Cassie,

Recommended Posts

Hi there, 

 

I have another question about my tortoise I'm afraid! 

 

I'm trying to rewrite the current code to be better, as it's a bit of a mess at the moment, and I've run into an issue. 

 

When changing the colour of the shell, originally I had the shell colour change function inside the 'change input' function, which was working fine - you can see that in a pen here: 

See the Pen dyRrNKr by fionchadd (@fionchadd) on CodePen

 

 

What I'm trying to do now is set up the colour changes as timelines, and then start the relevant timeline when the input changes. That's in a codepen here: 

 

The issue I'm having is that between certain colour changes, the shell changes back to a previous state rather than going from the current colour to the new colour, and I'm not sure why. For example, if you click 'multi' it changes to multicoloured, but if you then click 'green' it turns red before going green. If you then click 'multi' again it turns blue before going multicoloured. 

 

Am I doing something wrong in the way I'm calling the timelines? I tried using play(0) rather than restart() but it didn't seem to help. 

 

Thanks! 

 

Hannah

See the Pen WNOmROw by fionchadd (@fionchadd) on CodePen

Link to comment
Share on other sites

  • Solution

Heya Hannah!

 

You can use invalidate() in this sort of situation.

.invalidate( ) : self

[override] Flushes any internally-recorded starting/ending values which can be useful if you want to restart an animation without reverting to any previously recorded starting values.



See the Pen abwMweQ?editors=0011 by GreenSock (@GreenSock) on CodePen

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Hi Cassie, 

 

Ah that's perfect, thanks so much for your help! :-)

 

Hannah

  • Like 1
Link to comment
Share on other sites

pleasure!

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.
×