Share Posted August 29, 2021 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 More sharing options...
Share Posted August 29, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now