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.
Ready only link: Webflow - Copy of Dan Kanvis 2.1 Version (2021)