0

我一直在尝试ScrollTrigger以实现多步动画。

简而言之，这是我的预期行为/我想要实现的目标：  

  1. 用户向下滚动页面并.horizontalScroller__intro固定并向下移动到.horizontalScroller我当前定义为的我的中心end: "+=30%"）。
  2. 一旦它到达末尾，随着用户继续向下滚动，我现在想.horizontalScroller__intro慢慢淡出。
  3. 一旦.horizontalScroller__intro完全淡出，我现在想淡入css中的.horizontalScroller__items一个。opacity0
  4. 一旦.horizontalScroller__items 完全淡入，我希望用户能够水平滚动。
  5. 然后当用户向上滚动时相反  

当前结果：

  1. .horizontalScroller__intro立即开始淡出（并且完全被该end位置所取代）。我正在寻找 .horizontalScroller__intro在它到达其结束位置后开始淡出。 

  2. 我scrollTrigger为水平滚动（只包含一个图像）单独定义了一个。当此触发器与.horizontalScroller__intro触发器一起使用时，.horizontalScroller__intro跳跃。无法.horizontalScroller__items淡入（不确定它是否不喜欢它，因为它是在 css 中定义的？）

  我尝试了什么？

const tl = gsap.timeline( {
    scrollTrigger: {
        trigger: ".horizontalScroller__intro",
        start: "top",
        end: "+=30vh",
        scrub: true,
        // markers: true,
        toggleActions: "play reverse play reverse",
    }
});

tl
    .to('.horizontalScroller__intro', { autoAlpha: 1, duration: 0.5 })
    .to('.horizontalScroller__intro', { autoAlpha: 0, duration: 0.5 }, 0.5);

感谢我在这篇文章中提出了几个问题。任何帮助，将不胜感激 ：）

演示：

$(function() {

  let container = gsap.utils.toArray(".horizontalScroller__items");

  gsap.to(container, {
    x: () => -(document.querySelector('.horizontalScroller__items').scrollWidth - document.documentElement.clientWidth) + "px",
    xPercent: -100 * (container.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".horizontalScroller",
      // markers: true,
      pin: true,
      anticipatePin: 1,
      scrub: true,
      invalidateOnRefresh: true,
      refreshPriority: 1,
      end: () => "+=" + document.querySelector('.horizontalScroller__items').offsetWidth,
      onToggle: scrollTrigger => {
        scrollTrigger.refresh()
      },
    }
  });


  const tl = gsap.timeline( {
    scrollTrigger: {
      trigger: ".horizontalScroller__intro",
      start: "top",
      end: "+=30vh",
      scrub: true,
      // markers: true,
      toggleActions: "play reverse play reverse",
    }

  });

  tl
    .to('.horizontalScroller__intro', { autoAlpha: 1, duration: 0.5 })
    .to('.horizontalScroller__intro', { autoAlpha: 0, duration: 0.5 }, 0.5);


});
.spacer {
  height: 100vh;
  background: lightblue;
}

.horizontalScroller {
  padding: 60px 0;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .horizontalScroller {
    padding: 140px 0 80px 0;
  }
}
@media (min-width: 1200px) {
  .horizontalScroller {
    padding: 114px 0 80px 0;
  }
}
.horizontalScroller__intro {
  margin-bottom: 90px;
}
.horizontalScroller__header {
  margin-bottom: 17px;
}
.horizontalScroller__scroll {
  position: absolute;
  overflow: hidden;
  top: 0;
}
.horizontalScroller__items {
  position: relative;
  height: 100vh;
  width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<section class="spacer"></section>

<section class="horizontalScroller">

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-xxl-10">
        <div class="horizontalScroller__intro text-center index-top">
          <h2 class="horizontalScroller__header">This is the header</h2>
          <p class="horizontalScroller__standfirst mb-0 display--1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="horizontalScroller__scroll">
    <div class="horizontalScroller__items" id="horizontal-scroll">
      <img src="https://i.imgur.com/jlXz4II.png" alt="test" />
    </div>
  </div>

</section>

<section class="spacer"></section>

注意：如果你注释掉第二个scrollTrigger，你会看到介绍的 pin 有点工作。

4

0 回答 0