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-section', {autoAlpha: 0});
gsap.to('.js-demo-section', {
autoAlpha: 1,
x: 800,
scrollTrigger: {
trigger: '.js-trigger',
start: 'top center',
markers: true,
}
});
HTMLで書くこと
<div class="d-demo">
<section class="d-demo__section d-demo__section--bg">
<div class="d-demo__main js-trigger">
<div class="d-demo__wrap">
<div class="d-demo__elem js-demo-section"></div>
</div>
</div>
</section>
</div>