Streaming live at 10am (PST)

Buggy issues with Rotation on Mouseover animation

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

9bc6c3a596b755fd2f082f3a5e04fd6f

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

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.

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

1 Like

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.

I would do something like this:

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

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.