基于 GSAP 的滚动动画

Question

我试图制作一个基于滚动的下颚动画和一个新的 div 出现。为此，我使用了带有 Scroll Trigger 插件的 GSAP，但它在 PC 上几乎无法运行，在移动设备上也无法正常运行。我怎样才能在滚动上正确地创建这种效果并在下巴关闭后显示另一个 div？

首先，我添加了一个带有顶部和底部钳口的容器以及它们之间的一些占位符。然后我使用 GSAP 通过以下代码为滚动上的下颚设置动画：

<div class="container-fluid hero">
<div class="container-fluid jaws-top-container">
    <div class="container-fluid jaws-bg-top">

    </div>
    <div class="container-fluid jaws-top">
        <img class="teeth-img-top" src="img/jaws-top.svg">
    </div>
</div>

<div class="container-fluid hero-content">

</div>
<div class="container-fluid jaws-bottom-container">

    <div class="container-fluid jaws-bottom">
    <img class="teeth-img-bottom" src="img/jaws-bottom.svg">
    </div>
    <div class="container-fluid jaws-bg-bottom"></div>
</div>

    gsap.to(".jaws-top-container",
    {
    scrollTrigger: {
        trigger: ".jaws-top",
        start: "top",
        scrub: 1,
    },
    y: 500,
        scroller: ".hero"
    }
)
gsap.to(".jaws-bottom-container",
    {
        scrollTrigger: {
            trigger: ".jaws-top",
            start: "top top",
            scrub: 1,
        },
        y: -550,
        scroller: ".hero"
    }
)

但这在移动设备上不能正常工作，在桌面上几乎不能工作

我的演示：https://ydesign.tech/