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 = window.pageYOffset
if (scrollPosition >= componentPosition - 250) {
this.state = 'show'



} else {


this.state = 'hide'

}
}