I’ve set up a system where there are 3 hover targets and depending on the target the user hovers over, the text in the output window will change accordingly. I’m getting a bug/overlap, where the mouse movement between each target is shorter than the opacity animation speed. At the moment it is on 0.2 seconds and you can clearly see the error. If i change it to 0 it still appears, but a lot less.
Evidently, id like to keep this animation smooth, if possible without compromising by adding additional “mouse travel space” between each element. Any suggestions and work arounds are highly appreciated.
I’m not sure whether the bug is caused by my setup (I’m a beginner) or the way Interactions work or this isn’t a bug and it’s meant to work like that…
Though I do not have a answer to your question. I have a question of my own which I hope you can help me out with.
I am looking to do some what of a same animation on a project I am working on and wanted to know how did you achieve this effect. I have figured out a way to do it, but I am sure it is not a correct way.
I want the text in the left to animate when I hover over a image.
Im not quite sure what you are trying to achieve . Could you show a gif preview of what you looking for?
The effect i got is quite complex, but in the first link, you can see the hierarchy of how it’s done through interactions.
If you are looking for something more simple, there are plenty of tutorials that should help you out with understanding how interactions work when you want to reveal something.
And there is a lot of community-made material, you just need to search for precisely what you need. This forum also helps a bit. I might end up recording a short tutorial on how to get the exact effect I got as I haven’t seen many people post on it and its quite tough to write everything out step-by-step and not confuse people - there is a lot.
I would adjust the interaction elements so each of the divs within the Best Seller Info section have their own light purple background (to match the container) and simply fade in/out the single version that will cover the “Don’t know where to start?” default information.
I just went through and added backgrounds to each of the options that’s shown (based on the hovered element) and it seemed to fix the brunt of the issue, however adjusting the interaction will help smooth it out even more.
If you run into issues, feel free to reach out and I’ll give you some more direction
What a genius way to go around it, thanks a lot. It sure does get rid of the majority of the issue.
When you mention adjusting the interaction, do you mean making it longer or shorter? The longer version (0.35, instead of 0.2) it’s definitely still a little trippy, but definitely better than my version. Or perhaps making the fade-out of each description will make it more smooth. I have to play around with it more.
I updated the read-only and live if you have time to fiddle with it a little more.
I’d probably have the background of the information div fade in first, with the text fading in slightly behind—this should minimize the amount of text appearing “stacked” on each other. You could also fade out the default text at the same time you fade in the background color but that may not be necessary depending on how things look.
. Could you show a gif preview of what you looking for?