I have a page I'm starting to work on, with red dots that expand out on MouseOver to show a category name, then shrink back on MouseOut. Sometimes they do not shrink back, or shrink back only part of the way. It mostly happens when you move the mouse quickly over it.
Is there a fix for this? It's like they get frozen. You can see the page at this link.
You can download a zip file at this link.
One trick is to add a trigger custom behavior on the background image and have it send a behavior like “imageReset” … inside your symbols listen to that and reverse the timeline. That way hovering over the background resets them all. The mouse over remains in the symbol and plays the individual symbol forward.
Thanks, I'll give that a try tomorrow!
Nope, didn’t work. The red buttons aren't symbols, just groups. When I put an On MouseOver action on the background image to start the timelines in reverse, all of the dots jump to the last frame and then shrink down. They are all 'relative' timelines. Should I make them all individual symbols? I didn't use symbols to begin with because they all have different text in them.
Here is a simple example. You can ignore the CSS vars in there and just duplicate the symbol as many times as needed. Was playing around in reusing the same symbol, but that is not necessary.
example.hype.zip (19,8 KB)
Note:
Where @MaxZieb answer IMHO is the the way to go,
The main issue why your original concept is running into problems is a couple of things.
In this use case of your timelines, don't make them relative.
This is why they are getting stuck open even when you go back over them.
Also in your use case I would use continues rather than Start timeline. This will help in the animation being smoother
And take note of how Max has animated the text.
Your solution is over complicated to solve the hiding and showing of the text.
Thank you both! That work perfectly!