javascript - GSAP 的视差效果

Question

我有个问题想问你，希望你能帮助我。我正在使用 为自己构建视差效果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'
        });
    }

HTML:

<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>

通过 CSS 我给单 .container = transform: translate(X,Y)对于起点，因为每个元素的起点都不一样。每个span都有显示:inline-block;

Answer 1

您正在申请 parallax在 .container 上运行两次元素也有 .container-d类(class)。
也许您打算使用 .container:not(.container-d)在第一个？

parallax($('#fixed-hero-container .container:not(.container-d)'), $('#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: '0',
      end: '55% 5%'
    },
    y: val,
    ease: 'power4.out'
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script><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><style>body,html{min-height:300vh;margin:0;padding:0}#fixed-hero-container{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:34px;text-align:center;height:100vh;padding-top:20vh;background:#222;color:#fff}.container{display:inline-block}</style>