Is there a way to make the animation only run when scrolling down?

An animation effect appears when the element is visible by scrolling.

I wanted the animation to start every time I scroll down and to keep the animation finished when I scroll up. I've been thinking about it, but... I don't know how. Please help.

This is the implementation page.

window.onload = function () {
            const targets = document.querySelectorAll('[data-observer]')
            const images = document.querySelectorAll('[data-img]')
            const options = {
                rootMargin: '0px',
                threshold: 1.0
            }
            const addClass = (el) => {
                if (!el.classList.contains('is-visible')) {
                    el.classList.add('is-visible')
                }
            }
            const removeClass = (el) => {
                if (el.classList.contains('is-visible')) {
                    el.classList.remove('is-visible')
                }
        
            }




            const doThings = (entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        addClass(entry.target)
                    } else {
                        removeClass(entry.target)
                    }
                })
            }
            const observer = new IntersectionObserver(doThings, options)
            const observer2 = new IntersectionObserver(doThings, {
                ... options,
                threshold: 0.4
            })
            targets.forEach(target => {
                observer.observe(target)
            })
            images.forEach(target => {
                observer2.observe(target)
            })
        }