to / from / fromTo

Javascript

CDN

【https://gsap.com/docs/v3/Installation/?tab=cdn&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true&plugins=ScrollTrigger】からスクリプトタグを取得してソースコードに貼り付けます

基本的な使い方

gsap.メソッド("アニメーションさせる要素", {
    プロパティ: 設定値,
});

to（X方向に100px動かす）

<div class="box"></div>

<script>
gsap.to(".box", {
    x: 100,
    duration: 2,  // 2秒間のアニメーション
    delay: 2,  // 2秒遅れで開始
    repeat: -1,  // 無限リピート
    yoyo: true,  // リピートで順方向と逆方向を繰り返す
    ease: power1 // 速度変化
});
</script>

from（toと逆方向に動かす）

gsap.from(".box", {
    x: 100,
    scale: 1.5,  //　1.5倍拡大する（X方向だけ伸ばす場合はscaleX）
    rotate: 45, // 45度回転
    transformOrigin: "right top",  // 右上起点に回転させる
    backgroundColor: "#ffa8a8",  // 色を変える
    opacity: 0.3,  // 70%透過させる
    borderRadius: 30,  // 角丸30pxにする
});

fromTo（開始位置と終了位置を指定）

gsap.fromTo(".box", {
        x: 100,
    },
    {
        x: 200,
        duration: 2,
    }
);

BACK