Move elements

Hi! I’ve been trying to make a hover/mousein effect for some images, so they would move some pixels up/down/left/right, as the mouse hovers them. I’ve tried using a hover box but it is not possible since the animations available are more of a “initial load animation” (I call them like that hahah), meaning that they are meant to show the image for the first time, but they are not intended to animate the image while it is already displayed. I’m not sure if I’m being clear here, so an example would be:

  1. Image A is showed with a bounce in effect when the page is load (something you can also do with an image within a hover box? yes) Lets name this position “Position A”.
  2. Once it is displayed, lets say that the user hovers it (hover box gives you the chance to use a second image to create an effect, so the effect I want consists on moving the image 50px up and left compared to the first image aka “Position B”).
  3. So I add that second image with the new position, but there is no “transition” animation that allows me to create a moving effect from position A to B.
  4. I tried with code but I’m not an expert, I’m beginnig to understand it actually, so I’m not sure if with some code I could create that effect. I was thinking that maybe I could get the “Position A” of the image with some API, and then use it as the initial parameters for the “Position B” of that same image (without adding a second one as hover box needs to). And then somehow use another API to move the image between those two points whenever the user hovers it, setting also some features like the duration, delay, distance, angle, just like when you add an effect on wixcode mode.

I would appreciate it if someone could help me out coding this, or if wix introduces some api especifically to allows us to do create a “moving effect” it would be even better!!

1 Like