Angular mouse cursor follow ruins mouse enter and leave on host

[kresogalic 0 Likes (Newbie)]

Hey guys, I am trying to do a mouse cursor follow and also i want to achieve mouse enter and leave on host element, and somehow it triggers too much on host because mousemove host listener is somehow triggering it. 

 

This is a host listener on app.component.ts

 

@HostListener('mousemove', ['$event'])

mouseMove(e: MouseEvent) {

this.gsapService.cursorMove(e, this.cursor.nativeElement);

}

 

This is a gsap service.

import { Injectable } from '@angular/core';

import { gsap } from 'gsap/all';

 

@Injectable({

providedIn: 'root',

})

export class GsapService {

constructor() {}

 

cursorMove(e, element) {

const cursorPosition = {

left: e.pageX,

top: e.pageY,

};

gsap.to(element, {

duration: 0.3,

left: cursorPosition.left,

top: cursorPosition.top,

});

}

}

 

And this is mouse enter and leave on the host

@HostListener('mouseenter')

onMouseEnter(e) {

this.mouseEnter(e);

}

 

@HostListener('mouseleave')

onMouseLeave(e) {

this.mouseLeave(e);

}

 

constructor(private elRef: ElementRef) {}

 

ngOnInit(): void {}

 

mouseEnter(event) {

console.log(this.elRef.nativeElement, 'mouse enter');

const tl = new TimelineMax();

tl.to(this.elRef.nativeElement, 0.1, { scale: 1.01 });

tl.to('#circle-out', 0.3, { scale: 2 });

}

 

mouseLeave(event) {

console.log(this.elRef.nativeElement, 'mouse leave');

const tl = new TimelineMax();

tl.to(this.elRef.nativeElement, 0.1, { scale: 1 });

tl.to('#circle-out', 0.3, { scale: 1 });

}

 

 

 

[Cassie 5,408 Likes (Superhero)]

Hey there kresogalic! 

We can't really advise on how angular handles mouse events, but we're happy to help if there's a GSAP related question.

You may have more luck asking for help in the angular forums - https://gitter.im/angular/angular

Obviously if anyone with angular experience is reading this and knows how to help - feel free to jump in. Just managing expectations.