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