Streaming live at 10am (PST)

Reset an interaction on click, even if the first interaction hasn't finished

On the mobile version of my site, I have an “i” button in the top right of most sections, that provides more info on click. The first click reveals a div box with the info, and a light flare enters from off screen left. The light flare moves along the top of the div until it exits off screen right. This takes about 7 seconds to run its course. Users can then tap anywhere on the screen to close the info div and reset the interaction.

My issue is that, if I close the interactions before it completes the full run of its course, the light flare doesn’t reset properly. Instead, if you click on the “i” button again the flare starts in the middle of its interaction.

I have all my initial states set properly when it closes, but do I have to include the reverse of every step in the interaction? My thought was no because, in some cases, the interaction won’t make it past the first few seconds if the user exits.

Attached are some screenshots and my link is below. If you have any ideas, let me know.

Interaction Open:

Interaction Closed:

Light Flare:

Ready only link: Webflow - Copy of Dan Kanvis 2.1 Version (2021)