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で書くこと
/*--1つ目の例 --*/
gsap.to('.js-demo-section', {
x: 800,
scrollTrigger: {
trigger: '.js-trigger',
start: 'top center' ,
end: 'bottom center',
scrub: true,
markers: true,
}
});
/*--2つ目の例 --*/
gsap.to('.js-demo-section2', {
x: 800,
scrollTrigger: {
trigger: '.js-trigger2',
start: 'top center' ,
end: 'bottom center',
scrub: 2, //2秒間余韻で動く
markers: true,
},
stagger: {
from: "start", //左からアニメーション start、center、edges、random、endが指定できる
amount: 0.1 //どのくらいの割合でズラすか
}
});
HTMLで書くこと
<div class="d-demo">
<section class="d-demo__section d-demo__section--bg d-demo__section--lg">
<div class="d-demo__main js-trigger">
<div class="d-demo__wrap">
<div class="d-demo__elem js-demo-section"></div>
<div class="d-demo__elem d-demo__elem--color1 js-demo-section"></div>
<div class="d-demo__elem d-demo__elem--color2 js-demo-section"></div>
</div>
</div>
</section>
<section class="d-demo__section">
<div class="d-demo__main js-trigger2">
<div class="d-demo__wrap">
<div class="d-demo__elem js-demo-section2"></div>
<div class="d-demo__elem d-demo__elem--color1 js-demo-section2"></div>
<div class="d-demo__elem d-demo__elem--color2 js-demo-section2"></div>
</div>
</div>
</section>
</div>