AOS-Animate On Scroll Library responsiveness

I am trying to change the animation of AOS-Animate according to my screen size. Unfortunately I am not able to do this, could someone perhaps help me?

Thank you for any help in advance.

I managed how I can disable the AOS Library depending on the screen size but I want that different imgs their animation depending on the screen size change

        <div class="thumb gridItem">

            <img data-aos="fade-left" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-once="false" src="images/image.jpg">

            <div class="overlay">
                <div class="overlayText">Website</div>
            </div>

        </div>

    AOS.init({
        disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
        startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
        initClassName: 'aos-init', // class applied after initialization
        animatedClassName: 'aos-animate', // class applied on animation
        useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
        disableMutationObserver: false, // disables automatic mutations' detections (advanced)
        debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
        throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)

        disable: function() {
            var maxWidth = 600;
            return window.innerWidth < maxWidth;
        }
    });