Javascript GSAP视差效应

我有个问题想问你，希望你能帮我。我正在使用GSAP-ScrollTrigger v3.5.1构建视差效果，并为自己构建了一个名为parallax（）的函数

我想在一个具有不同设置的区域内为DOM中的多个对象设置动画，这是可行的

问题：如果在我的代码中多次调用该函数，动画将不再平滑，尤其是当我使用负值和正值时

JS:

parallax($('#fixed-hero-container .container'), $('#fixed-hero-container'), 0.3, -50, 0.3, true);
parallax($('#fixed-hero-container .container.container-d'), $('#fixed-hero-container'), 0.3, 100, 0.3, true);

function parallax(elA, elT, dur, val, scr, mark) {
        let tl = gsap.timeline();

        tl.to( elA, dur, {
            scrollTrigger: {
                trigger: elT,
                scrub: scr,
                markers: mark,
                start: '50% 50%',
                end: '55% 5%'
            },
            y: val,
            ease: 'power4.out'
        });
    }

<div id="fixed-hero-container">
                <div class="fname">
                    <span class="container">M</span>
                    <span class="container container-d">a</span>
                    <span class="container">s</span>
                    <span class="container container-d">s</span>
                    <span class="container">i</span>
                    <span class="container container-d">m</span>
                    <span class="container">o</span>
                </div>

                <div class="name">
                    <span class="container">C</span>
                    <span class="container container-d">i</span>
                    <span class="container">l</span>
                    <span class="container container-d">l</span>
                    <span class="container">u</span>
                    <span class="container container-d">f</span>
                    <span class="container">f</span>
                    <span class="container container-d">o</span>
                </div>

                <!--<div class="scrollIndicator"></div>-->
            </div>

HTML:

parallax($('#fixed-hero-container .container'), $('#fixed-hero-container'), 0.3, -50, 0.3, true);
parallax($('#fixed-hero-container .container.container-d'), $('#fixed-hero-container'), 0.3, 100, 0.3, true);

function parallax(elA, elT, dur, val, scr, mark) {
        let tl = gsap.timeline();

        tl.to( elA, dur, {
            scrollTrigger: {
                trigger: elT,
                scrub: scr,
                markers: mark,
                start: '50% 50%',
                end: '55% 5%'
            },
            y: val,
            ease: 'power4.out'
        });
    }

<div id="fixed-hero-container">
                <div class="fname">
                    <span class="container">M</span>
                    <span class="container container-d">a</span>
                    <span class="container">s</span>
                    <span class="container container-d">s</span>
                    <span class="container">i</span>
                    <span class="container container-d">m</span>
                    <span class="container">o</span>
                </div>

                <div class="name">
                    <span class="container">C</span>
                    <span class="container container-d">i</span>
                    <span class="container">l</span>
                    <span class="container container-d">l</span>
                    <span class="container">u</span>
                    <span class="container container-d">f</span>
                    <span class="container">f</span>
                    <span class="container container-d">o</span>
                </div>

                <!--<div class="scrollIndicator"></div>-->
            </div>

M
A.
s
s
我
M
o
C
我
L
L
U
F
F
o

---

通过CSScontainer=transform:translate（X，Y）作为起点，因为每个元素的起点不同。
每个span都有display:inline block

您在同样具有

.container-d

类的

.container

元素上应用了两次

视差

函数

也许您打算在第一个示例中使用

.container:not（.container-d）

视差（$（'#固定英雄容器。容器：非（.container-d）），$（'#固定英雄容器'），0.3，-50，0.3，真）； 视差（$（'固定英雄容器.container.container-d'），$（'固定英雄容器'），0.31000,0.3，真）； 功能视差（elA、elT、dur、val、scr、mark）{ 设tl=gsap.timeline（）； tl.to（elA、dur、{ 滚动触发器：{ 触发器：elT， 擦洗：scr， 马克：马克， 开始：“0”， 完:"55%5%" }, y:瓦尔， 轻松：“power4.out” }); }

---

M a s i M o C i l l u f o body，html{min height:300vh；margin:0；padding:0}#固定英雄容器{字体系列：Arial，Helvetica，无衬线；字体重量：700；字体大小：34px；文本对齐：中心；高度：100vh；顶部填充：20vh；背景：#222；颜色：#fff}。容器{显示：内联块}

最好在使用GSAP制作动画的元素上设置所有变换。不这样做是一个错误。