用gsap/滚动playing动画(播放) Lottie文件
用gsap/滚动playing动画(播放) Lottie文件
提问于 2022-07-05 13:49:54
我们试图用gsap/scrollTrigger动画(播放) Lottie文件。滚动很好，直到我到达我们应该使用scrollTrigger动画一些元素的部分。
这是我们现在的代码。您只需将这些代码片段放在代码页中即可使用。或者，如果您希望它更容易，搜索我的名字amini-py在代码。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js" integrity="sha512-v8B8T8l8JiiJRGomPd2k+bPS98RWBLGChFMJbK1hmHiDHYq0EjdQl20LyWeIs+MGRLTWBycJGEGAjKkEtd7w5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/@lottiefiles/lottie-interactivity@1.6.0/dist/lottie-interactivity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.min.js"></script> <div class="wrapper-child">
<div class="child">
<h5>First</h5>
<p>lorem ipsum sit amet sssssssssssssssssssssss</p>
</div>
<div class="child">
<h5>Second</h5>
<p>lorem ipsum sit amet sssssssssssssssssssssss</p>
</div>
<div class="child">
<h5>Thirds</h5>
<p>lorem ipsum sit amet sssssssssssssssssssssss</p>
</div>
<div class="child">
<h5>Fourth</h5>
<p>lorem ipsum sit amet sssssssssssssssssssssss</p>
</div>
<div class="child">
<h5>Fifth</h5>
<p>lorem ipsum sit amet sssssssssssssssssssssss</p>
</div>
</section> width: 90vw;
height: 250px;
overflow-y: hidden;
display: flex;
}
.wrapper-child {
border: 1px solid red;
width: 50%;
}LottieInteractivity.create({
player: "#firstLottie",
mode: "scroll",
actions: [
{
visibility: [0, 1.0],
type: "seek",
frames: [0, 300]
}
]
});
gsap.registerPlugin(ScrollTrigger);
const sections = gsap.utils.toArray(".child");
gsap.to(sections, {
yPercent: -100 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".wrapper",
pin: true,
scrub: 1,
start: "top center",
end: () => "+=" + document.querySelector(".wrapper").offsetHeight
}
});回答 1
Stack Overflow用户
发布于 2022-07-13 02:50:03
GSAP是不必要的。我建议使用浏览器的交观测器API
工作演示：https://codepen.io/rabelais88/pen/NWYRXdJ
<script src="...your lottie url"></script>
<style>
body {
overflow-y: scroll;
}
#root {
height: 10000px;
}
.lottie-player {
position: fixed;
top: 0;
left: 0;
}
p {
padding: 20px;
}
.anchor {
position: absolute;
top: 5000px;
}
</style>
<div id="root">
<div style="width: 300px; height: 300px;" class="lottie-player" data-animation-path="https://assets8.lottiefiles.com/packages/lf20_pjulrn8x.json"></div>
<p>scroll downward to make it work!</p>
<p class="anchor">animation activates here</p>
</div>const lottiePlayer = document.querySelector(".lottie-player");
lottie.loadAnimation({
container: lottiePlayer,
renderer: "svg",
loop: true,
autoplay: false,
path: lottiePlayer.dataset.animationPath,
name: "on-scroll-anim"
});
const options = {
root: null,
rootMargin: "0px",
threshold: [0, 0.2, 1]
};
const handleIntersect = (entries) => {
const anchor = entries[0];
if (anchor.isIntersecting && anchor.intersectionRatio >= 0.2) {
lottie.play("on-scroll-anim");
} else {
lottie.pause("on-scroll-anim");
}
};
const observer = new IntersectionObserver(handleIntersect, options);
observer.observe(document.querySelector(".anchor"));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72870584
复制相关文章
相似问题
腾讯云开发者
