GSAP覚え書き

インストール

https://gsap.com/docs/v3/Installation/

//CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>

from / to / fromTo / set メソッドを使うだけなら上記のみでOK

//ScrollTrigger
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>

Tween

to

// gsap.method('element", ...)
gsap.to('.box', {
        x: 100,
        y: 100,
        duration: 1,
        repeat: -1, //リピート
        yoyo: true,
        ease: 'linear' //noneでもOK
    }
)

set

CSSでセットしておくのがいいかも

// 最初の状態
gsap.set('.box', {
    opacity: 0,
    backgroud: "yellow"
});

// 最初の状態から表示
gsap.to('.box', {
    opacity: 1,
    duration: 2
})

from / fromTo

gsap.from('.box.--1', {
    y: -1000,
    duration: 2,
    ease: 'linear',
    repeat: -1,
    yoyo: true
})

gsap.fromTo('.box.--2', {
    y: 200,
    opacity: 0
}, {
    y: -200,
    opacity: 1,
    duration: 3,
    ease: 'lenear',
    borderRadius: 0,
    repeat: -1,
    yoyo: true
});

stagger

gsap.set('.box', {
    borderRadius: 0
})

gsap.to('.box', {
    borderRadius: '50%',
    duration: 1,
    y: 100,
    ease: 'power1',
    yoyo: true,
    repeat: -1,
    stagger: 0.1,
 //-0.1だと後ろから
})

timeline

var tl = gsap.timeline({
    defaults: {
        duration: 1, //3つに共通する設定
    },
    repeat: 2, repeatDelay: 1, yoyo: true
});
tl.to(".box.--1", {x: -100});
tl.to(".box.--2", {y: -50});
tl.to(".box.--3", {opacity: 0});