Help with timeline reverse

[NickNo]

Hi, I have some legend keys that animate in with a switch toggle - when I toggle them off, I want the legend to animate back out (reverse()) - but the way I have setup it up, it isn't working - can someone shed some light on why?  Also, I'm creating the timeline on each toggle of the checkbox, which I realise isn't very efficient. Is there a better way to set it up, keeping in mind the #legendid will be dynamic (on some  pages there will be 2 legends, 3 on others and they will all have different #ids)?

See the Pen dymvBer by nickjacobsnz (@nickjacobsnz) on CodePen

[SteveS]

You have it set up so that every time you click, the timeline is recreated. Since you are using .to, all the animation values are relative from the time of creation.

The first time you click the toggle, it opens the legend because it's going from an invisible state to a visible one.

The next time you click the toggle, it recreates the timeline. It looks at the properties on the legend, says "we need to go TO that" but it is already there. So when you reverse it, you are just going to the current values.

You have to create your timelines outside of the event that reverses it or use .fromTo tweens. The former is probably better than the latter.

[NickNo]

Now that you point it out that makes complete sense   Although, not completely sure how I would create dynamic timelines?

[NickNo]

This is what I ended up with - if there is a tidier/better way to do it, please let me know

See the Pen eYMEjWp by nickjacobsnz (@nickjacobsnz) on CodePen