Hover Sometimes Not Working

[Pixelous]

Hi,

I have a grid images and noticed while testing hover sometimes not working. It is not working on mouse enter the image but works after mouse out of the image.

Any comment on this?

Kind regards

[nixks]

Hi can you share a a jsfiddle example so we can understand better?

[Pixelous]

@nixks sorry for the late reply, please see the test site https://demo.megathe.me/heat/test/

Any help?

[Pixelous]

Looks the bug appears when move the cursor fast in and out so the animation can not complete.

[Pixelous]

I am not sure but perhaps hoverIntent jQuery Plugin http://briancherne.github.io/jquery-hoverIntent/ can help?

[Pixelous]

Ok, what is going on, when move the cursor fast in and out the animation works fine but after finishing the second image suddenly appears.

@robin-dela any idea how to fix it?

[robin-dela]

Hey,

I took a look at the demo website you provided and the library doesn't seem to be embedded. Please provide a demo or jsfiddle with your problem so I can help you

[sasakarastojkovic]

The problem: quick hover over the image (<0.5s) makes the second image suddenly appears. You can see this in action: https://calmserenity.bluelinemedia.rs/. Replicate the problem with quick hover, and then wait a second (mouse pointer should be out of the image).

Why this is happening? The reason is new version of GSAP, and hover-effect library isn't compatible with it. You can circumvent the problem if you set speedIn and speedOut to be the same, but that isn't the solution.. If you use old version of GSAP (from 2017) then everything is Ok. But I want to use the newest GSAP (speed, options, etc.) and thus the real solution is to update hover-effect library to be compatible with GSAP 3.7.0. The three.js seems that isn't problematic, but this should be checked in detail.

[tomislavjezidzic]

I have fixed this issue by editing the plugin core. In transitionIn() and transitionOut() add to gsap overwrite: true - it will overwrite any previous gsap animation

I've updated the plugin to a new gsap version so there is no TweenMax

function transitionOut() {
        gsap.to(mat.uniforms.dispFactor, {
            duration: speedOut,
            value: 0,
            ease: easing,
            overwrite: true,
            onUpdate: render,
            onComplete: render,
        });
    }