Mouseenter/mouseleave animation kill

[aok]

I'm unsure if there is a solution to this but just wanted to query it.

 

I'm doing a simple fade in/out of background image on hover of menu links using two methods (mouseenter and mouseleave)  (it also fades out other menu links but that's unrelated).

 

The issue is that I'm setting the background image based on an `activeCategory` and  `categories[activeCategory].image` data and if you hover quickly the `activeCategory` on the linkLeave will be set to null while also hovering over another item and it becomes broken. 

 

Can anyone think of a decent way to implement this without the bugs using GSAP. Is there a way to prevent the animation if the user hasn't hovered for long enough etc?

 

Hopefully you understand my issue.

 

linkEnter($event, index) {
	let allLinks = this.$refs.menu.querySelectorAll('a')
	let allLinksExceptThis = Array.from(allLinks).filter(item => item.innerText != $event.currentTarget.innerText);
	gsap.to(allLinksExceptThis, {
		opacity: 0.5,
		duration: 0.5
	})
	this.activeCategory = index
	gsap.to(this.$refs.bg, {
		opacity: 1,
		duration: 0.5
	})
},
linkLeave(index) {
	let allLinks = this.$refs.menu.querySelectorAll('a')
	gsap.to(allLinks, {
		opacity: 1,
		duration: 0.5
	})
	gsap.to(this.$refs.bg, {
		opacity: 0,
		duration: 0.5,
		onComplete: () => {
			if (index === this.activeCategory) this.activeCategory = null
		}
	})
}

 

[Cassie]

Hi there Aok,

 

I'm finding this a little difficult to visualise - could you pop together a minimal demo for us? 

Thanks!