How to make registered effect works every time the event triggered?

[latentia]

I'm following some of the tutorials and modifying them my way. I found that the registered effect only works once and not every time the mouse enters. here is my code 

 

gsap.registerEffect({
    name: "fade",
    defaults: {duration: 2}, 
    effect: (targets, config) => {
        return gsap.to(targets, {duration: config.duration, opacity: 0});
    }
});

gsap.registerEffect({
    name: "rot",
    defaults: {duration: 2},
    effect: (targets, config) => {
        return gsap.to(targets, {duration: config.duration, x: config.x, rotate: 180});
    }
});



var node;
 function WinLoad() {
    node = document.getElementById('t1');
    node.innerHTML='Found you';
}
window.onload = WinLoad;

document.querySelectorAll(".box")
    .forEach(function(x) {
    x.addEventListener("mouseenter", function() {
        if (node){
            node.innerHTML = x.className;
            if (x.classList.contains('green')){
                gsap.effects.fade(x);
            }
            else {
                gsap.effects.rot(x, { x: 0 });
            }
        }
    });
});

[GreenSock]

It's difficult to troubleshoot without a minimal demo, but I assume the problem is that you never animate back to the original values. For example, you hover over an element and it animates rotation to 180...and then you hover over it again, and you try animating it to 180 but it's ALREADY at 180, so you won't see any changes. That has nothing to do with GSAP or a bug - it's just a logic issue in how you're setting things up. 

 

Are you trying to do something like this?: 

See the Pen YzBRVYz?editors=1010 by GreenSock (@GreenSock) on CodePen

[latentia]

Thanks for your answer. I got what you are saying. 

is it possible to rotate again even though the original position has been changed? 

[GreenSock]

You can do pretty much anything, sure. I think you might be over-engineering this, though. Why not just do something like this?: 

 

See the Pen YzBRarN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you still need help, please make sure you provide a minimal demo (like a CodePen) that clearly illustrates the problem and we'd be happy to take a look. 

[latentia]

Thanks, the answer you provided is again similar to the one before. I want to apply to the effect again without doing the reverse.  How to solve it if the element is already rotated but I still want it to rotate when the mouse enters?

 

 

See the Pen PoVxRQE by falmasri (@falmasri) on CodePen

 

 

[GreenSock]

Sure, you could just do rotation: "+=180" but the problem is that if the user hovers over/off/over quickly, the rotation may end at an odd value. For example, if it's in the middle of rotating to 180 degrees and you hover over again when it's at 48 degrees, that means 48 + 180 = 228 which would be an odd place to land. So the trick is to record the destination value so that you can just increment that by 180 so that it always ends in perfect increments of 180: 

 

See the Pen dyaQmER?editors=1010 by GreenSock (@GreenSock) on CodePen