Trigger function start only when scrolling down?

[jackytam2020]

Currently have it setup as this:
const { ref: lineRef, inView: lineIsVisible } = useInView(); <div ref={lineRef} className={${lineIsVisible ? "line-in-view" : "line"}}>

I want the div to take on the classname of "line-in-view" but only when I'm scrolling down to the div until its in view. I don't want it to do anything when I'm scrolling back up.

[thebuilder]

You'd want to combine this with another hook that tracks scroll direction (e.g. a useEffect that monitors scroll), and see what the last scroll direction was when the inView changes.