Scroll Magic Animations

animations.js

const controller = new ScrollMagic.Controller();

window.addEventListener("load", function (event) {
    /**
     * Fade In
     * @type {NodeListOf<Element>}
     */
    const fadeIn = document.querySelectorAll('.fade-in');
    fadeIn.forEach(e => {
        const delay = e.getAttribute('data-delay') ? e.getAttribute('data-delay') : 0;
        const tl    = gsap.to(e, {
            autoAlpha: 1,
            duration : 2,
            ease     : "power4.out",
            delay    : delay
        });

        new ScrollMagic.Scene({
            triggerElement: e,
            triggerHook   : "onEnter",
            offset        : 20,
            reverse       : false,
        })
            .setTween(tl)
            .addTo(controller);
    });

    /**
     * Fade In Down
     * @type {NodeListOf<Element>}
     */
    const fadeInDown = document.querySelectorAll('.fade-in-down');
    fadeInDown.forEach(e => {
        const delay = e.getAttribute('data-delay') ? e.getAttribute('data-delay') : 0;
        const tl    = gsap.fromTo(e, {y: '-=20'}, {
            duration: 2, autoAlpha: 1,
            y       : '+=20',
            ease    : "power4.out",
            delay   : delay
        });

        new ScrollMagic.Scene({
            triggerElement: e,
            triggerHook   : "onEnter",
            offset        : 20,
            reverse       : false
        })
            .setTween(tl)
            .addTo(controller);
    });

    /**
     * Fade In Up
     * @type {NodeListOf<Element>}
     */
    const fadeInUp = document.querySelectorAll('.fade-in-up');
    fadeInUp.forEach(e => {
        const delay = e.getAttribute('data-delay') ? e.getAttribute('data-delay') : 0;
        const tl    = gsap.fromTo(e, {y: '+=20'}, {
            duration : 2,
            autoAlpha: 1,
            y        : '-=20',
            ease     : "power4.out",
            delay    : delay
        });

        new ScrollMagic.Scene({
            triggerElement: e,
            triggerHook   : "onEnter",
            offset        : 20,
            reverse       : false
        })
            .setTween(tl)
            .addTo(controller);
    });

    /**
     * Fade In Left
     * @type {NodeListOf<Element>}
     */
    const fadeInLeft = document.querySelectorAll('.fade-in-left');
    fadeInLeft.forEach(e => {
        const delay = e.getAttribute('data-delay') ? e.getAttribute('data-delay') : 0;
        const tl    = gsap.fromTo(e, {x: '-=20'}, {
            duration : 2,
            autoAlpha: 1,
            x        : '+=20',
            ease     : "power4.out",
            delay    : delay
        });

        new ScrollMagic.Scene({
            triggerElement: e,
            triggerHook   : "onEnter",
            offset        : 20,
            reverse       : false
        })
            .setTween(tl)
            .addTo(controller);
    });

    /**
     * Fade In Right
     * @type {NodeListOf<Element>}
     */
    const fadeInRight = document.querySelectorAll('.fade-in-right');
    fadeInRight.forEach(e => {
        const delay = e.getAttribute('data-delay') ? e.getAttribute('data-delay') : 0;
        const tl    = gsap.fromTo(e, {x: '+=20'}, {
            duration : 2,
            autoAlpha: 1,
            x        : '-=20',
            ease     : "power4.out",
            delay    : delay
        });

        new ScrollMagic.Scene({
            triggerElement: e,
            triggerHook   : "onEnter",
            offset        : 20,
            reverse       : false
        })
            .setTween(tl)
            .addTo(controller);
    });
});

css.scss

.fade-in, .fade-in-right, .fade-in-left, .fade-in-up, .fade-in-down {
    @include opacity(0);
    visibility : hidden;
}