scrollTriggerAnimation.ts

import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

export const scrollElemAnim = (elementsToAnimation: string) => {
    gsap.registerPlugin(ScrollTrigger);

    const el = document.querySelectorAll(elementsToAnimation);

    el.forEach((elem, i) => {
        let tl = gsap.timeline({
            scrollTrigger: {
                trigger: elem,
                toggleActions: "play none none none",
                start: "center bottom",
                // end: "bottom 50%+=100px",
            },

        })

        tl.to(elem, {
            ease: "Expo.easeOut",
            opacity: 1,
            transform: "translateY(0) skewY(0)",
            duration: i * .2,
            deley: 0.5
        })
    })


};


/* .scrollAnim {
    transform:translateY(30%) skewY(20deg);
    transform-origin: top left;
    opacity: 0;
}
*/