How to reverse animation before it completes

Design help Animations & Interactions
1

Hello,

I need to remake an animation made in GSAP in webflow.
The animation is triggered on click, and it can be reversed on second click.
The problem is second click can happen before the first click animation completes.

I would like the animation to reverse from current state.

I made a simple demo => blue bubble expanded on first click and shrank on first click.

As you can see if you second click after animation completes it simply jumps from start state of second animation.

Here is my public share link: LINK
(how to access public share link)

2

Alright it works when the 0 duration initial state is removed on the second animation, see an example on this new version

I took the (bad) habit of adding this 0 duration step when making animations in Webflow because this is required sometimes when first animation might not be triggered before. In case of a first click/second click animation this is not possible so there is no reason to add it.