时间戳

首页 > 解决方案 > 如何实现几种不同的 gsap 滚动触发动画？

javascript - 如何实现几种不同的 gsap 滚动触发动画？

问题描述

我是 gsap 滚动触发器动画的新手。我正在创建一个动画，但我需要创建另一个动画，我指定一个新触发器并创建一个新的 gsap 时间线。它不是那样工作的。如何正确实现多个动画？

gsap.timeline({
            scrollTrigger: {
                trigger: ".gsap__one",
                start: "top center",
                end: "750 bottom",
                markers: false,
                scrub: true,
            }
        })
        .from(".gsap__one__right", { x : innerWidth * 0.2, opacity: 0, width: 0 })
        .from(".gsap__one__left", { x : innerWidth * -0.2, opacity: 0, width: 0 })ж

gsap.timeline({
            scrollTrigger: {
                trigger: ".gsap__three",
                start: "top center",
                end: "750 bottom",
                markers: false,
                scrub: true,
            }
        })
        .from(".gsap__three__right", { x : innerWidth * 0.2, opacity: 0, width: 0 })
        .from(".gsap__three__left", { x : innerWidth * -0.2, opacity: 0, width: 0 })

标签： javascriptgsapscrolltrigger

解决方案

推荐阅读