"Ghost" elements left over from other timelines if transition occurs too quickly

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!)


I'm finding this (I think) works as expected on Firefox. Are you seeing pretty reliable fragments in most browsers? It would be awesome if you could do a quick video showing us what you're seeing.

Relying on the 'mouse out' event is not super reliable, so it is good you have an additional check to reset everything after the mouseout action occurs elsewhere.

How many of the fragments are you building out timelines for? I know there is a easier way to manage this using some programmatic control or a text file of fragments that you can pull from, so if you could templatize parts of this, and replace the text of a Hype element. This way, you would only have one timeline showing fragment text, and it would respond to data pulled from elsewhere.

I know you're done with the fadein / out part, but you could do this en masse with regular CSS:hover properties. (Here's an example)

You can set a class for all your 'fragments' and then highlight them when you mouse over them.

When using relative timelines, a "start timeline" action will set the relative keyframe value. Continue does not have this behavior. Mixing starts/continues will lead to this behavior. I'd recommend using Continue for both the mouse over and mouse out. In this respect, you would also not need to use relative timelines anymore since you have a reverse timeline action.

(Relative timelines with a reset timeline would be more useful for a mouse click flow, where on click everything but what you click on restores itself. With that you could use a reset relative timeline that puts everything back, and then afterwards start the timeline that moves in the single clicked items.)