Buggy issues with Rotation on Mouseover animation

[Bastralox]

Hello!

I recently started figuring out how to use interactions in order to create animations for a clients website I am working on, and I was quite close to making it really smooth.

Up until the point where it started freaking out on me whenever I moved my mouse a little bit off the image.

Here is what happens

Anyone have any idea as to why it decided to act so buggy and strange?

It also reacts at-least 10x faster than what the gif conveys. So it seems a bit more calm here but on my site its not like that.

---

Here is my site Read-Only: https://preview.webflow.com/preview/kevins-radical-project-fcfbab?utm_source=kevins-radical-project-fcfbab&preview=04969565431a4d1cb620e6f9335459d6

[avivtech (Aviv Shwartz)]

Hi @Bastralox,

What you experiencing is a result of the interaction being triggered by and affect the same element. While you move your pointer over the element, the interaction changes the elements rotation, which makes your pointer no longer over the element.

Loom | Send a video. Not a thousand words.

You should have the trigger be a different element then the one the interaction affects.

[Bastralox]

Thanks for the reply!

How would I be able to make the animation trigger if it is not on the image?

From what your video showed, I would have to make the box around the image a lot smaller, because what seems to interfere with the interaction is the box around the circular logo.

[avivtech (Aviv Shwartz)]

I would do something like this:

Loom | Send a video. Not a thousand words.

p.s.
don’t pay attention to the fact that I did the rotation backwards