[use target from eventListener]

Ahhh ok - bloody obvious as always - thanks for helping me out - much appreciated 👍

[use target from eventListener]

Ah ok that's nice, but how would I remove the hover eventListeners on click?

 

item.addEventListener("mouseenter", () => hover.play());
item.addEventListener("mouseleave", () => hover.reverse());

I thought the hover would have to be it's own function to be able to do that right?

[use target from eventListener]

Here you go

See the Pen OJEXvvp by samyh-the-encoder (@samyh-the-encoder) on CodePen

[use target from eventListener]

Hey,

 

Hopefully a simple one for someone who's been using gsap more than a day

I'm just trying to cut down on the number of gsap.to animations I'm calling, but I'm unable to get any animation happening when passing evt.currentTarget as it's always null - I also tried evt.target & event.target.id to no avail

 

document.getElementById("menuitem0").addEventListener("mouseenter", hoverIn);

function hoverIn(evt) {
	console.log(evt);
	gsap.to(evt.currentTarget, {
		scale: 1.5,
		color: "white",
		duration: 0.3,
		paused: true,
		ease: "power2.inOut"
	});
}

 

I saw you can do something like this 

let hover1 = gsap.to(menuitem1, {
			scale: 1.5,
			color: "white",
			duration: 0.3,
			paused: true,
			ease: "power2.inOut"
		});

		document.getElementById("menuitem1").addEventListener("mouseenter", () => hover1.play());
		document.getElementById("menuitem1").addEventListener("mouseleave", () => hover1.reverse());

but need to removeEventListener, so needed to break the function out

 

Any help is much appreciated