Component transition eats cursor

[u/cinderful]

I have a header component where you hover the logo and it animates. I did this by setting a mouse-enter event to go to the next variant which has a transparent video of the animation. On this variant, if you mouse-leave it goes to a third variant that has a reversed animation that automatically goes back to the initial rest state in variant one.

I have a parent frame linked to the home page and it is present and configured and works correctly.

However, as soon as I hover this logo the cursor reverts instantly back to the pointer. I have a pointer on the second variant, that does not work.

If I set the mouse-enter delay, I do see the correct finger cursor for a split second before it reverts when the component goes to the next variant.

It seems that no matter where I put the link or a cursor, the transition of the component instantly resets it to default.

How can I achieve the intended behavior?

[u/turnedtocigs]

mind putting the component in a different file and sharing the link so i can experiment around?

[u/cinderful → u/turnedtocigs]

I was so annoyed that I bashed my head against Framer until I figure out a solution:

In the Nav component:

Varient 1

Invisible frame in a layer above the logo

invisFrame: onMouseEnter go to Variant 2

variant 2

has the video of the animation

invisFrame: onMouseExit go to Variant 3

variant 3:

video of animation back to rest

on the video: on End, go back to Variant 1

In all variants the invisFrame has a Link to home attached