I’m trying to create a hover interaction where:
• the image gets resized
• the heading moves
• some text reveals at a specific location
It’s working fine when I hover in and out from the left side of the element (technically the side that remains at the same spot) but then when I try it from anywhere else, the interaction glitches and spazzes out.
I couldn’t upload a video of the glitchy one, so you could see it using my live preview by visiting the PROJECTS page and previewing it with the interaction set on the CONVERSE project.
Do not target the object you want to be resized with hover ix. Because your also add “on hover out” to this object which make this object to enlarge again, once you hover from the side from which the object resizes there will come a point when the object left your hover, initiating hover out, enlargin the object. It then bumps into your cursor again, making it smaller, leave the hover state again… hence the glitch. Make sure the area that is a trigger always stays the same size. Put everything inside a div and put this div inside your interaction trigger. Then target this inner div and resize it.
