如何禁用向上滚动gsap ScrollTrigger上的滚动触发器

Question

我有一个带有gsap和ScrollTrigger动画的简单页面：

function animateFrom(elem, direction) {
direction = direction || 1;
var x = 0,
y = direction * 100;
if (elem.classList.contains("gs_reveal_fromLeft")) {
x = -100;
y = 0;
} else if (elem.classList.contains("gs_reveal_fromRight")) {
x = 100;
y = 0;
}
elem.style.transform = "translate(" + x + "px, " + y + "px)";
elem.style.opacity = "0";
gsap.fromTo(elem, {
x: x,
y: y,
autoAlpha: 0
}, {
duration: 1.5,
x: 0,
y: 0,
autoAlpha: 1,
ease: "expo",
overwrite: "auto"
});
}
function hide(elem) {
gsap.set(elem, {
autoAlpha: 0
});
}
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".gs_reveal").forEach(function(elem) {
hide(elem); // assure that the element is hidden when scrolled into view
ScrollTrigger.create({
trigger: elem,
markers: false,
onEnter: function() {
animateFrom(elem)
},
// onEnterBack: function() { animateFrom(elem, -1) },
// onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view
});
});
});

.gs_reveal {
opacity: 0;
visibility: hidden;
will-change: transform, opacity;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js" integrity="sha512-AMl4wfwAmDM1lsQvVBBRHYENn1FR8cfOTpt8QVbb/P55mYOdahHD4LmHM1W55pNe3j/3od8ELzPf/8eNkkjISQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container">
<div class="py-5">
<h1 class="gs_reveal text-center">Scroll down and up to see different reveal animations</h1>
</div>
<div class="">
<div class="row py-5">
<div class="col-5 gs_reveal gs_reveal_fromLeft">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=1" alt="" class="img-fluid">
</div>
</div>
<div class="col-7">
<h2 class="gs_reveal">Create amazing svg animations</h2>
<p class="gs_reveal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quia doloribus, inventore rem, at pariatur asperiores minus qui accusantium quod nisi! Modi eveniet eaque enim totam deserunt dolores alias aliquid.</p>
</div>
</div>
<div class="row py-5">
<div class="col-7 text-end">
<h2 class="gs_reveal">Supercharge immersive WebGL experiences</h2>
<p class="gs_reveal"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam praesentium numquam fugiat consequatur aliquid eos assumenda natus deserunt eum doloribus quia mollitia omnis, voluptatem maiores dicta exercitationem veritatis magnam iusto in
officiis reiciendis ipsum, delectus maxime? Sit eligendi temporibus dolores? </p>
</div>
<div class="col-5 gs_reveal gs_reveal_fromRight">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=2" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="row py-5">
<div class="col-5 gs_reveal_fromLeft">
<div class="block">
<img src="https://picsum.photos/479/479?index=3" alt="" class="img-fluid">
</div>
</div>
<div class="col-7 text-start">
<h2 class="gs_reveal">Control performant Canvas animations</h2>
<p class="gs_reveal"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore nulla natus minus praesentium, adipisci quam distinctio recusandae accusamus similique aut velit iusto reprehenderit deleniti! Nobis?</p>
</div>
</div>
<div class="row py-5">
<div class="col-7 text-end">
<h2 class="gs_reveal">Award winning websites</h2>
<p class="gs_reveal"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vero temporibus deleniti qui rem ipsa! </p>
</div>
<div class="col-5 gs_reveal gs_reveal_fromRight">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=4" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>

[CodePen][1]

但是当我上下滚动时，动画会重复吗？当我向上滚动然后再次向下滚动时，动画不应该重复吗？

问题：如何在向上滚动gsap ScrollTrigger时禁用滚动触发器？

Answer 1

问题是每次输入节时都会调用animateFrom。

您需要将其标记为已播放。

function animateFrom(elem, direction) {
if (elem.played === true) {
return;
}
elem.played = true;
direction = direction || 1;
var x = 0,
y = direction * 100;
if (elem.classList.contains("gs_reveal_fromLeft")) {
x = -100;
y = 0;
} else if (elem.classList.contains("gs_reveal_fromRight")) {
x = 100;
y = 0;
}
elem.style.transform = "translate(" + x + "px, " + y + "px)";
elem.style.opacity = "0";
gsap.fromTo(elem, {
x: x,
y: y,
autoAlpha: 0
}, {
duration: 1.5,
x: 0,
y: 0,
autoAlpha: 1,
ease: "expo",
overwrite: "auto"
});
}
function hide(elem) {
gsap.set(elem, {
autoAlpha: 0
});
}
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".gs_reveal").forEach(function(elem) {
hide(elem); // assure that the element is hidden when scrolled into view
ScrollTrigger.create({
trigger: elem,
markers: false,
onEnter: function() {
animateFrom(elem)
},
// onEnterBack: function() { animateFrom(elem, -1) },
// onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view
});
});
});

.gs_reveal {
opacity: 0;
visibility: hidden;
will-change: transform, opacity;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js" integrity="sha512-AMl4wfwAmDM1lsQvVBBRHYENn1FR8cfOTpt8QVbb/P55mYOdahHD4LmHM1W55pNe3j/3od8ELzPf/8eNkkjISQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container">
<div class="py-5">
<h1 class="gs_reveal text-center">Scroll down and up to see different reveal animations</h1>
</div>
<div class="">
<div class="row py-5">
<div class="col-5 gs_reveal gs_reveal_fromLeft">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=1" alt="" class="img-fluid">
</div>
</div>
<div class="col-7">
<h2 class="gs_reveal">Create amazing svg animations</h2>
<p class="gs_reveal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quia doloribus, inventore rem, at pariatur asperiores minus qui accusantium quod nisi! Modi eveniet eaque enim totam deserunt dolores alias aliquid.</p>
</div>
</div>
<div class="row py-5">
<div class="col-7 text-end">
<h2 class="gs_reveal">Supercharge immersive WebGL experiences</h2>
<p class="gs_reveal"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam praesentium numquam fugiat consequatur aliquid eos assumenda natus deserunt eum doloribus quia mollitia omnis, voluptatem maiores dicta exercitationem veritatis magnam iusto in
officiis reiciendis ipsum, delectus maxime? Sit eligendi temporibus dolores? </p>
</div>
<div class="col-5 gs_reveal gs_reveal_fromRight">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=2" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="row py-5">
<div class="col-5 gs_reveal_fromLeft">
<div class="block">
<img src="https://picsum.photos/479/479?index=3" alt="" class="img-fluid">
</div>
</div>
<div class="col-7 text-start">
<h2 class="gs_reveal">Control performant Canvas animations</h2>
<p class="gs_reveal"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore nulla natus minus praesentium, adipisci quam distinctio recusandae accusamus similique aut velit iusto reprehenderit deleniti! Nobis?</p>
</div>
</div>
<div class="row py-5">
<div class="col-7 text-end">
<h2 class="gs_reveal">Award winning websites</h2>
<p class="gs_reveal"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vero temporibus deleniti qui rem ipsa! </p>
</div>
<div class="col-5 gs_reveal gs_reveal_fromRight">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=4" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>

Answer 2

您可以在onComplete回调挂钩中添加trigger.kill();：

function animateFrom(elem, direction) {
direction = direction || 1;
var x = 0,
y = direction * 100;
if (elem.classList.contains("gs_reveal_fromLeft")) {
x = -100;
y = 0;
} else if (elem.classList.contains("gs_reveal_fromRight")) {
x = 100;
y = 0;
}
elem.style.transform = "translate(" + x + "px, " + y + "px)";
elem.style.opacity = "0";
gsap.fromTo(elem, {
x: x,
y: y,
autoAlpha: 0
}, {
duration: 1.5,
x: 0,
y: 0,
autoAlpha: 1,
ease: "expo",
overwrite: "auto",
onComplete: function() {
ScrollTrigger.getAll().forEach((trigger) => { 
if (elem === trigger.trigger) trigger.kill() 
});
}
});


}
function hide(elem) {
gsap.set(elem, {
autoAlpha: 0
});
}
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".gs_reveal").forEach(function(elem) {
hide(elem); // assure that the element is hidden when scrolled into view
ScrollTrigger.create({
trigger: elem,
toggleActions: "play none none none",
markers: false,
onEnter: function() {
animateFrom(elem)
},
// onEnterBack: function() { animateFrom(elem, -1) },
// onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view
});
});
});

.gs_reveal {
opacity: 0;
visibility: hidden;
will-change: transform, opacity;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js" integrity="sha512-AMl4wfwAmDM1lsQvVBBRHYENn1FR8cfOTpt8QVbb/P55mYOdahHD4LmHM1W55pNe3j/3od8ELzPf/8eNkkjISQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container">
<div class="py-5">
<h1 class="gs_reveal text-center">Scroll down and up to see different reveal animations</h1>
</div>
<div class="">
<div class="row py-5">
<div class="col-5 gs_reveal gs_reveal_fromLeft">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=1" alt="" class="img-fluid">
</div>
</div>
<div class="col-7">
<h2 class="gs_reveal">Create amazing svg animations</h2>
<p class="gs_reveal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quia doloribus, inventore rem, at pariatur asperiores minus qui accusantium quod nisi! Modi eveniet eaque enim totam deserunt dolores alias aliquid.</p>
</div>
</div>
<div class="row py-5">
<div class="col-7 text-end">
<h2 class="gs_reveal">Supercharge immersive WebGL experiences</h2>
<p class="gs_reveal"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam praesentium numquam fugiat consequatur aliquid eos assumenda natus deserunt eum doloribus quia mollitia omnis, voluptatem maiores dicta exercitationem veritatis magnam iusto in
officiis reiciendis ipsum, delectus maxime? Sit eligendi temporibus dolores? </p>
</div>
<div class="col-5 gs_reveal gs_reveal_fromRight">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=2" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="row py-5">
<div class="col-5 gs_reveal_fromLeft">
<div class="block">
<img src="https://picsum.photos/479/479?index=3" alt="" class="img-fluid">
</div>
</div>
<div class="col-7 text-start">
<h2 class="gs_reveal">Control performant Canvas animations</h2>
<p class="gs_reveal"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore nulla natus minus praesentium, adipisci quam distinctio recusandae accusamus similique aut velit iusto reprehenderit deleniti! Nobis?</p>
</div>
</div>
<div class="row py-5">
<div class="col-7 text-end">
<h2 class="gs_reveal">Award winning websites</h2>
<p class="gs_reveal"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vero temporibus deleniti qui rem ipsa! </p>
</div>
<div class="col-5 gs_reveal gs_reveal_fromRight">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=4" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>

Answer 3

function animateFrom(elem, direction) {
direction = direction || 1;
var x = 0,
y = direction * 100;
if (elem.classList.contains("gs_reveal_fromLeft")) {
x = -100;
y = 0;
} else if (elem.classList.contains("gs_reveal_fromRight")) {
x = 100;
y = 0;
}
elem.style.transform = "translate(" + x + "px, " + y + "px)";
elem.style.opacity = "0";
gsap.fromTo(elem, {
x: x,
y: y,
autoAlpha: 0
}, {
duration: 1.5,
x: 0,
y: 0,
autoAlpha: 1,
ease: "expo",
overwrite: "auto",
onComplete: function() {
ScrollTrigger.getAll().forEach((trigger) => { 
if (elem === trigger.trigger) trigger.kill() 
});
}
});


}
function hide(elem) {
gsap.set(elem, {
autoAlpha: 0
});
}
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".gs_reveal").forEach(function(elem) {
hide(elem); // assure that the element is hidden when scrolled into view
ScrollTrigger.create({
trigger: elem,
toggleActions: "play none none none",
markers: false,
onEnter: function() {
animateFrom(elem)
},
// onEnterBack: function() { animateFrom(elem, -1) },
// onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view
});
});
});

.gs_reveal {
opacity: 0;
visibility: hidden;
will-change: transform, opacity;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js" integrity="sha512-AMl4wfwAmDM1lsQvVBBRHYENn1FR8cfOTpt8QVbb/P55mYOdahHD4LmHM1W55pNe3j/3od8ELzPf/8eNkkjISQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container">
<div class="py-5">
<h1 class="gs_reveal text-center">Scroll down and up to see different reveal animations</h1>
</div>
<div class="">
<div class="row py-5">
<div class="col-5 gs_reveal gs_reveal_fromLeft">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=1" alt="" class="img-fluid">
</div>
</div>
<div class="col-7">
<h2 class="gs_reveal">Create amazing svg animations</h2>
<p class="gs_reveal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quia doloribus, inventore rem, at pariatur asperiores minus qui accusantium quod nisi! Modi eveniet eaque enim totam deserunt dolores alias aliquid.</p>
</div>
</div>
<div class="row py-5">
<div class="col-7 text-end">
<h2 class="gs_reveal">Supercharge immersive WebGL experiences</h2>
<p class="gs_reveal"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam praesentium numquam fugiat consequatur aliquid eos assumenda natus deserunt eum doloribus quia mollitia omnis, voluptatem maiores dicta exercitationem veritatis magnam iusto in
officiis reiciendis ipsum, delectus maxime? Sit eligendi temporibus dolores? </p>
</div>
<div class="col-5 gs_reveal gs_reveal_fromRight">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=2" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="row py-5">
<div class="col-5 gs_reveal_fromLeft">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=3" alt="" class="img-fluid">
</div>
</div>
<div class="col-7 text-start">
<h2 class="gs_reveal">Control performant Canvas animations</h2>
<p class="gs_reveal"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore nulla natus minus praesentium, adipisci quam distinctio recusandae accusamus similique aut velit iusto reprehenderit deleniti! Nobis?</p>
</div>
</div>
<div class="row py-5">
<div class="col-7 text-end">
<h2 class="gs_reveal">Award winning websites</h2>
<p class="gs_reveal"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vero temporibus deleniti qui rem ipsa! </p>
</div>
<div class="col-5 gs_reveal gs_reveal_fromRight">
<div class="d-block">
<img src="https://picsum.photos/479/479?index=4" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>