GSAP timeline resets items to previous state before playing

[fionchadd]

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

[Cassie]

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

[fionchadd]

Hi Cassie, 

 

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

 

Hannah

[Cassie]

pleasure!