WENPE PLAYGROUND
WENPE PLAYGROUND
WENPE PLAYGROUND
WENPE PLAYGROUND
Image Not Found
#Next.js
#GSAP

2023.02.25

Next.jsで作成したブログにGSAPでアニメーションを適用する

概要

  • Next.jsでブログを作成しているのですが、GSAPでアニメーションを適用したいと思います。
  • 最終的には、スクロールトリガーを利用したいのですが、今回はブログを構成しているカードをアニメーションでしたからフワッと出現させるアニメーションをつけます

ゴール

  • 今回はブログを構成しているカードをアニメーションでしたからフワッと出現させるアニメーションをつける

作成物


手順

GSAPのインストール

  • アニメーションの実装にはGSAPを利用するので、yarnでインストールします。
$ yarn add gsap


アニメーションの適用

  • アニメーションを実際に適用します
  • レンダリングが終わっていない状態で、gsapを呼び出すとまだ要素がないというエラーが出るので、useEffectでレンダリングを待ちます
  • gsap.fromを利用して、ある状態から元の状態にどのように戻すか、を定義してアニメーションします。
    • y: 30 により少ししたから、autoAlpha: 0により透明な状態から元の状態にduration: 0.7により0.7秒で戻します
    • 要素ごとに適用順序をずらしたい場合は、staggerを利用してください。


// pages/index.tsx
import { ReactElement, useEffect } from 'react';
import { gsap } from 'gsap';

// 中略

const Home: NextPageWithLayout<InferGetStaticPropsType<typeof getStaticProps>> = ({
  blogs,
}: Props) => {
  useEffect(() => {
    gsap.from('.blogCard', {
      y: 30,
      duration: 0.7,
      autoAlpha: 0,
      stagger: {
        each: 0.2,
      },
    });
  });
  return (
    <div>

// 中略

                <div className='blogCard'>
                  <BlogCard
                    imagePath={blog.image.image.url}
                    imageAlt='Image Not Found'
                    title={blog.title}
                    tags={blog.tags}
                    className='blogCaa'
                  ></BlogCard>
                </div>

// 中略

    </div>
  );
};


  • 上記で完了です


注意

  • ローカルのdevサーバだとうまくアニメーションが適用されませんでした。
  • 本番にデプロイすると問題なく動作します。
  • 進展があれば追記します
  • こちら解決しました
    • 内容
      • SSGからSSRへ変更した
      • fromからfromtoへ変更した
      • こちらの記事の対応をしたら直りました
        • いろいろ勉強不足でした泣

© 2023 Wenpe