GSAP 3 Scroll Trigger on leave animation reverse

3.1k Views Asked by At

I have used GSAP 3.0 ScrollTrigger in one of my websites everything is working fine but I want my animations to be reversed when leaving the section or div. I know there is a callback call onLeave but I am not able to figure out how to use it. I am new to the scroll trigger. I am pasting the code sample for you to understand.

armor animation config

        let armor = gsap.timeline({

            scrollTrigger: {
                trigger: '.armor-animation',
                pin: true,
                pinSpacing: true,
                anticipatePin: .5,
                scrub: 1,
                start: "top 150px",
                end: "+=1500",
                toggleActions: "play reverse none none",
                // scroller: ".smooth-scroll"
                // markers: true,
                onLeave: () => {
                    // armor.from(".layer-1", .8, {
                    //         translateY: 200,
                    //         opacity: 0
                    //     }, .5)
                    // console.log("leave");
                }
            }

        });

armor section animation

        armor.from(".layer-1", .8, {
                translateX: -200,
                opacity: 0
            }, .5)
            .from(".layer-2", .8, {
                translateY: 200,
                opacity: 0
            }, .6)
            .from(".layer-3", .8, {
                translateY: -200,
                opacity: 0
            }, .6)
            .from(".crack-effect", 2, {
                translateY: -200,
                opacity: 0
            }, 2)
            .from(".method h1", 2, {
                translateX: 200,
                opacity: 0
            }, .6);
0

There are 0 best solutions below