Jump to content
GreenSock

kresogalic

Angular mouse cursor follow ruins mouse enter and leave on host

Recommended Posts

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

 

 

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×