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? https://codepen.io/falmasri/pen/PoVxRQE

Thanks for your answer. I got what you are saying. is it possible to rotate again even though the original position has been changed?

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 }); } } }); });

Solved