I'm running into an issue where I have a number of timelines with elements on each that fade in and out. The animations are triggered on hover, so on mouseover a set timeline will start, and on mouseout the timeline continues in reverse. There's an issue though where if another timeline starts too quickly, the animation from the previous timeline will remain on screen. I have all timelines set to relative and it mostly works fine, and I have a "reset" timeline that will activate on mouseout of the container element, and should return all faded elements to 0% opacity, which worked at first, but as I add more elements this happens and they do not go away without refreshing the page.
Here's a link to the file — the two images with red borders at the top left are the ones with animations applied, although eventually each should have its own (I know, it's a lot & I am definitely open to more straightforward methods of accomplishing this effect!)