Gsap : 基礎
- docs : https://gsap.com/docs/v3/Installation
- CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
- npm : npm install gsap
- nexjtjs : import Gsap from 'gsap';
基本的な使い方
メインメソッドはtoとfrom
gsap.from()
gsap.to()
例① :
gsap.from(".header",{duration: 1 , y: "-100%"} )
意味 : headerクラスが1秒かけて 上から下へ
- fromの中の “引数” がreturn内 (react) のクラス名とリンクしている(=動かしたい部分)
例②:
gsap.to(".buttons", {
duration: 2,
stagger: 1,
rotation: 360,
x: 150,
});
意味:1秒かけて1秒ごとに360度回転 & X方向に150px
- stagger は順番通りに行われ1セットで終了することを意味
- xはtranslateXを意味
fromTo
gsap.fromTo(
".box4",
{ opacity: 0.1, scale: 0 },
{ opacity: 1, duration: 2, scale: 1.1, color: "red" }
);
- {はじめ } と {おわり }
timeline()
順番にアニメーションが行われる1連のセット
let timeline = gsap.timeline();
let timeline = gsap.timeline();
timeline
.to(".boxes1", { duration: 1, y: 200 })
.to(".boxes2", { duration: 1, x: 200 })
.to(".boxes3", { duration: 1, x: 300 });
頻度が高そうなもの
ブログカードの表示
gsap.set(".posts li", { y: 30, opacity: 0.4 });
gsap.to(".posts li", {
duration: 1,
y: 0,
opacity: 1,
stagger: 0.2, // アイテムごとの遅延
ease: "power2.out" // イージングの設定
});
- li をそれぞれ遅延させて表示させる
reactで使う場合:
"use client"
useEffect(() => {
gsap.set(".cards", { y: 30, opacity: 0.4 });
gsap.to(".cards", {
duration: 2,
y: 0,
opacity: 1,
stagger: 0.2, // アイテムごとの遅延
ease: "power2.out", // イージングの設定
});
}, []);
ease
実行終了まで継続するモーション
https://gsap.com/docs/v3/Eases/
.to(".boxes1", { duration: 1, y: 200 , ease: "bounce"})
上記は終了時点で跳ねる感じになる
← Go home