headに書くこと
<script src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/gsap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/ScrollTrigger.min.js"></script>
JavaScriptで書くこと
gsap.set(".js-demo-section04", {opacity:0,y: 100}); //初期状態をセット
ScrollTrigger.batch(".js-demo-section04", {
onEnter: batch => gsap.to(batch, {opacity: 1, y: 0,}),
start: "top 50%",
once: true,
markers: true
});
HTMLで書くこと
<div class="d-demo">
<section class="d-demo__section">
<div class="d-demo__main js-trigger2">
<div class="d-demo__wrap d-demo__wrap--wrap">
<div class="d-demo__elem js-demo-section04"></div>
<div class="d-demo__elem d-demo__elem--color1 js-demo-section04"></div>
<div class="d-demo__elem d-demo__elem--color2 js-demo-section04"></div>
<div class="d-demo__elem js-demo-section04"></div>
<div class="d-demo__elem d-demo__elem--color1 js-demo-section04"></div>
<div class="d-demo__elem d-demo__elem--color2 js-demo-section04"></div>
<div class="d-demo__elem js-demo-section04"></div>
<div class="d-demo__elem d-demo__elem--color1 js-demo-section04"></div>
<div class="d-demo__elem d-demo__elem--color2 js-demo-section04"></div>
<div class="d-demo__elem js-demo-section04"></div>
<div class="d-demo__elem d-demo__elem--color1 js-demo-section04"></div>
<div class="d-demo__elem d-demo__elem--color2 js-demo-section04"></div>
</div>
</div>
</section>
</div>