滚动触发：一旦进入触发元素，如何不通过每个页面滚动播放整个动画？答案

【问题标题】：Scroll Trigger: How to play the whole animation not by every page scroll once it enters the trigger element?滚动触发：一旦进入触发元素，如何不通过每个页面滚动播放整个动画？
【发布时间】：2022-09-24 06:08:19
【问题描述】：

我有在每个页面滚动时播放的动画。我想要实现的是在触发固定元素的id section 时播放整个动画。所以当它进入固定的元素时，它应该播放整个动画，而不是每个页面滚动。

这里有一个很好的参考，可以更好地理解输出是什么

https://squareup.com/us/en/why-square 下 Look and feel like a pro.

这可以使用滚动触发器和 gsap 吗？我对这个 jquery 插件非常陌生，并且仍在发现它的功能和控件。

const canvas = document.getElementById(\"hero-lightpass\");
const context = canvas.getContext(\"2d\");

const frameCount = 108;

const currentFrame = index => (
  `https://dev.jin.services/fazz/wp-content/themes/hello-elementor/assets/images/imagesequence/home-banner-${(index + 1).toString().padStart(3, \'0\')}.jpg`
);

const images = []
const banner = {
  frame: 0
};

for (let i = 0; i < frameCount; i++) {
  const img = new Image();
  img.src = currentFrame(i);
  images.push(img);
}
gsap.registerPlugin(ScrollTrigger);

gsap.to(banner, {
  frame: frameCount - 1,
  snap: \"frame\",
  ease: \"none\",
  scrollTrigger: {
    scrub: true,
    pin: \"#pin-banner\",
    trigger: \"#hero-lightpass\",
    duration: \'100%\',
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger\'s onUpdate
});

images[0].onload = render;

function render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[banner.frame], 0, 0); 
}

html {
height: 100vh;
}

body {
height: 5000px;
background: #000;
}
#pin-banner {max-width:1220px;margin:0 auto;padding:0;width:100%;}
#hero-lightpass {width:100%;}
.pin-spacer {padding:0 !important;}

<body>
    <div style=\"height:600px;\"></div>
    <div id=\"pin\">
        <div id=\"pin-banner\">
            <canvas id=\"hero-lightpass\" width=\"1920\" height=\"1080\"></canvas>
        </div>
    </div>
    <div style=\"height:600px;\">
    <h1 style=\"font-size: 42px;color:#fff;\">TEST</h1></div>

</body>

<script src=\"https://code.jquery.com/jquery-3.6.0.min.js\" integrity=\"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=\" crossorigin=\"anonymous\"></script>
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js\"></script>
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/ScrollTrigger.js\"></script>

标签： jquery gsap scrollmagic scrolltrigger

【解决方案1】：

首先，您使用的是非常旧版本的 GSAP 和 ScrollTrigger，因此我建议您更新它们。

关于您要执行的操作，基本上删除配置中的 scrub: true key:value 对，就可以了。同样在最新版本中，不推荐使用持续时间，而赞成设置特定的最终值，该值可以使用相对值：

https://greensock.com/docs/v3/Plugins/ScrollTrigger

向下滚动到用法和特殊属性以找到它。

最后，如果您仍有问题，请前往 GSAP 论坛。

【讨论】：