技術

Remix上でGSAPアニメーションを動かしてみた

こんにちわ

最近のWebサイトを見ているとかっこいいアニメーションが使われているものが多いですよね。色々調べてみるとGSAP(GreenSock Animation Platform)というJavaScriptアニメーションライブラリを使っているのが多いっぽいなということに気づきまして。そのGSAPの公式サイトはこちらです。Showcaseのページにあるようなアニメーションをさせることができるようです。調べていくうちにそもそもどうやってアニメーションを動かしているのか気になってきまして、ドキュメントも一応読んで見たのですが、いまいちわからんということで実際に動かして確認してみました(笑)無課金でも簡単なテキストアニメーションや、ブラウザのスクロールをトリガーにしたアニメーションをさせることはできるのでやってみました。

なぜRemix?

Remixについてはこちらの公式サイトを見て頂くのが良いかと思います。フロントエンドのフレームワークを色々探していた中で以下の様な条件を満たすものとしてRemixが当てはまりそうだったので最近使ってみたりしています。僕の勝手なイメージです。使っていく中で実際のところどうなのかっていうのが把握できたらいいなくらいに思っています。

  • ベンダーロックインしなさそう(Next.jsはVercel上で稼働させることに特化しすぎているイメージ)
  • デプロイが簡単にできた(Netlifyを使うと簡単にデプロイできた)
  • 運用コストを安くしたい(Netlify + remixが小規模だと安くなりそう)
  • Vue.jsと比較してReactの方が多少は慣れている

GSAPのインストールは基本的には公式サイト通り

GSAPの公式ページにReactのインストール手順が載っています。僕は今回npmでのインストール方法でインストールし、基本的には公式のサイトに掲載されている手順通りでできたのですが、1点だけうまく動かない点があったのでここに残しておきたいなと思います。公式サイトでは以下のようにgsapのライブラリをインポートして利用する例が挙げられていますがScrollTriggerの方がエラーになり実行時エラーとなりました。

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

Cannot use import statement outside a moduleエラーに遭遇

実際にページ表示時に発生したエラーは以下になります。RemixはSSR(Server Side Rendering)が使えるのですが、ScrollTriggerはクライアント側での実行である必要がありそうでした。

[vite] Error when evaluating SSR module /app/routes/_index.tsx: failed to import "gsap/ScrollTrigger"
|- /Users/manabu/src/github.com/dubakichi/portfolio-front-remix-v2/node_modules/gsap/ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1279:20)
    at Module._compile (node:internal/modules/cjs/loader:1331:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)
    at cjsLoader (node:internal/modules/esm/translators:366:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)

エラーに対処する

他にも対処方法としてはあるのかとは思うのですが、クライアント側での初回ロード時にScrollTriggerのライブラリをロードするようにしたことでこの問題は解消しました。具体的には以下の様なコードになります。

import { gsap } from "gsap";

export default function Index() {
  const aboutUsRef = useRef(null);
  useEffect(() => {
    import("gsap/ScrollTrigger").then(({ ScrollTrigger }) => { // ここでScrollTriggerをロードする様にする
       gsap.registerPlugin(ScrollTrigger);
    }
  }, []);
  // GSAPのアニメーションコード
  gsap.fromTo(aboutUsRef.current, {
    // ・・・
  }
return (
    <div>
      <div className={styles.box} ref={aboutUsRef}>ScrollTriggerを使っています</div>
    </div>
  );
}

おわりに

上記の修正するとちゃんとアニメーションが動く様になりました!今回はScrollTriggerについて書きましたが、TextPluginなど他のプラグインでも同様の問題が起きました。この場合も上記記載同様の対処で対応できます。Remixに限らずNext.jsなどSSRを有効にしているフレームワークの場合同様の問題が起きるのだと思います。僕と同様にハマった人の何かしらのお力になれれば幸いです。

でわまた!

2024年秋 プロジェクトマネージャー試験受験するど!前のページ

今年の例のアレ、放置すると減税にならない次のページ

関連記事

  1. 技術

    [AWS]1コインサーバーでLAMP(Laravel8)を使う<前編>

    こんにちわ、どばきちです。AWSにはLightsai…

  2. 技術

    [AWS]Amazon Linux2 カーネル4.14から5.10へ

    こんにちわ、どばきちです。Amazon Linux2…

  3. 技術

    CLI環境からSlackに通知する

    こんにちわ、どばきちです。今回は前回の記事の続きです…

  4. フリーランス

    iPhoneの領収書整理を自動化してみた話 構成編

    こんにちわ、どばきちです。前回はiPhoneの領収書…

  5. WordPress開発・運用

    WordPressテーマの修正を本番環境にデプロイする

    こんにちわ前々回はこちらで、WordPressのローカル開発…

  6. 技術

    [AWS]VPC消せないけど費用はかかる悪夢

    こんにちわ、どばきちです。先日個人用に作成したAWS…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

2024年12月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
  1. フリーランス

    年金の申請マイナポータルでできる!
  2. 技術

    [AWS]Amazon Linux2 カーネル4.14から5.10へ
  3. フリーランス

    トレンドマイクロの評価の結果が出てた
  4. 雑談

    Mr.Children 「生きろ」
  5. WordPress開発・運用

    [docker]WordPressのローカル開発環境を用意してみた
PAGE TOP