javascript - GSAP 3 Scroll Trigger on leave动画反转

Question

我GSAP 3.0 ScrollTrigger在我的一个网站中使用过一切正常，但我希望在离开部分或 div 时反转我的动画。我知道有一个回调电话onLeave，但我不知道如何使用它。我是滚动触发器的新手。我正在粘贴代码示例以供您理解。

盔甲动画配置

        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.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);

标签： javascripthtmlanimationgsapscrolltrigger