On scroll scroll hover animation Angular
In View or HTML // Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, reprehenderit? //in TS import { trigger, state, style, animate, transition } from '@angular/animations'; // decalre 2 styles 1 for show and one for hide const style1 = style({ opacity: 1, transform: "translateX(0)" }) const style2 = style({ opacity: 0, transform: "translateX(-100%)" }) //in animation animations: [ trigger('foobar', [ state('show', style1), state('hide', style2), transition('show => hide', animate('700ms ease-out')), transition('hide => show', animate('700ms ease-in')) ]) ] }) // make default state = hide; //check if scroll is on element; @HostListener('window:scroll', ['$event']) checkScroll() { const componentPosition = this.el.nativeElement.offsetTop const scrollPosition ...