メインコンテンツまでスキップ

GSAP

Get Started​

以下、チートシートに記載がないもののみ抜粋

Getter, Setter​

下記は、引数なしで呼ぶとゲッターとして、引数を渡すとセッターとして使用できる

  • time()
  • progress()
  • duration()
  • delay()

Tips​

スクロールと連動するアニメーション​

import gsap from 'gsap';

gsap.timeline({
  scrollTrigger: {
    trigger: boxRef.current!,
    start: 'center 70%',
    end: 'center 30%',
    markers: true,
    scrub: true,
  },
}).fromTo(
  boxRef.current,
  { opacity: 0, y: -200, x: 500 },
  { opacity: 1, y: 0, x: 400, rotate: 75 },
);

コンポーネント化​

複雑なアニメーションはコンポーネント化し、.add()でタイムラインに追加していくと良い。

参考

stagger を複数の子 react コンポーネントに適用する​

import gsap from 'gsap';
import React, { forwardRef, useCallback, useEffect, useRef } from 'react';

const Title = forwardRef<HTMLDivElement, { name: string }>((props, ref) => {
  const { name } = props;
  return (
    <div>
      <div>
        <div ref={ref}>name is: {name}</div>
      </div>
    </div>
  );
});

const AnimatedTitles = ({ names }: { names: Array<string> }) => {
  const nameRefs = useRef<Array<HTMLDivElement>>([]);

  const onRefUpdate = useCallback((el: any, index: number) => {
    nameRefs.current[index] = el;
  }, []);

  useEffect(() => {
    gsap.from(nameRefs.current, 1, {
      x: 100,
      stagger: 0.2,
    });
  }, []);

  return (
    <div>
      {names.map((name, index) => {
        return <Title name={name} ref={(el) => onRefUpdate(el, index)} />;
      })}
    </div>
  );
};

function App() {
  const names = ['dog', 'cat', 'bird'];

  return <AnimatedTitles names={names} />;
}

export default App;