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

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

2024.06.18

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を有効にしているフレームワークの場合同様の問題が起きるのだと思います。僕と同様にハマった人の何かしらのお力になれれば幸いです。

でわまた！