Gatsbyウェブサイトでアニメーションを動かす[Tween24.js編]

前回[Framer-Motion]でアニメーションを動かしてみましたが、[Tween24.js]を活用することで同じようにアニメーションを実装できるので、試して見ました。

文字を一文字ずつ、おしゃれに表示できそうなのが、面白そうなので使ってみます。

Tween24.jsの導入

GitHub - a24/tween24js: Tween24 for JavaScript

GitHubではnpmでインストールする様に書かれていますが、今回はjsdelivrを使います。

tween24 CDN by jsDelivr - A CDN for npm and GitHub

現在の最新バージョンは0.9.11なので、以下のurlを使いました.

https://cdn.jsdelivr.net/npm/tween24@0.9.11/dist/tween24.min.js

あとは使いたいファイルの中で、以下の<script>タグを追加すれば使える様になるわけですね。

<script src="https://cdn.jsdelivr.net/npm/tween24@0.9.11/dist/tween24.min.js"></script>

早速Gatsbyで使ってみましょう。

GatsbyでのTween24.jsの使い方

まずは上記の<script>タグを設定する必要があります。これにはuseEffectのフックを使います。useEffectに詳しくない方は、下記リンクを読むとわかりやすいと思います。

副作用フックの利用法 – React

useEffectは以下のように設定してみました。最初にアニメーションを動かそうとしたときに、"Tween24が未定義"というエラーになることが多かったので、スクリプトを読み込む順番を指定するようにしました。

useEffect(() => {
    const tween24 = document.createElement('script');  
    tween24.src = "https://cdn.jsdelivr.net/npm/tween24@0.9.11/dist/tween24.min.js";
    tween24.async = true;
    
    const main_script = document.createElement('script');
    main_script.innerHTML = `
        Tween24.tween("#sentence", 1).x(200).play();
    `;
    
    tween24.onload = () => {
        document.body.appendChild(main_script);
    }
    document.head.appendChild(tween24);
    
    return () => {
        document.head.removeChild(tween24);
        document.body.removeChild(main_script);
    }
}, []);

最初にtween24でライブラリをロードしています。そのロードが終わってから、onloadでアニメーションさせるスクリプトを読み込んでいます。

動かすアニメーションは、main_script.innerHTML内に書いていきます。

これでtween24.jsを利用する準備が整いました。

GatsbyでTween24.jsのアニメーションを行う

アニメーションの基本

Tween24.jsは要素のid/class属性を認識して、アニメーションさせることができます。なので、動かしたい要素にはidかclass属性を設定しておきます。

<p id="sentence">この文章を動かしてみたいです。</p>

あとは、これを動かすためのアニメーションを設定します。

アニメーションを作成するにはTween24.tween関数を使います。最初の引数に、動かしたい要素のidやclassを指定し、2つ目の引数で何秒かけて動かすかの秒数を追加します。

Tween24.tween("#sentence", 1)

Tween24.jsはメソッドチェーンを使って書いていくのが特徴なので、具体的にどう動かすかはこの後ろに"."をつけて追加していきます。

Tween24.tween("#sentence", 1).x(200)

最後にplay()を追加することでアニメーションが実行されます。

Tween24.tween("#sentence", 1).x(200).play()

上記の場合、x方向(横)に200px動かすアニメーションが実施されます。

初期状態の設定

アニメーションの初期状態を設定して、その場所から動かしたい場合は、prop()/propText()を使います。prop()はその要素全体を設定しますが、propText()は1文字ずつに分解して、設定してくれます。

例えば、通常の位置から右に動かした状態から、元の場所に戻すには以下のようにします。

Tween24.prop("#move_to_original").x(200).play();
Tween24.tween("#move_to_original",2).x(0).play();

一文字ずつ動かすには、以下のようにします。serialは直列処理を行ってくれます。この処理では1文字ずつ連続で処理してくれています。

Tween24.serial(
    Tween24.propText("#each_character").y(-100).opacity(0).scaleXY(0.5, 3).letterSpacing(10),
    Tween24.lagSort(0.2, Sort24._Mountain,
        Tween24.tweenText("#each_character", 1, Ease24._6_ExpoOut).y(0).opacity(1).scale(1)
    )
).play();

詳しい使い方に関しては、公式の説明を見る方がわかりやすいと思います。以下のリンク先には、実例も多いので参考にしやすいです。

新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました

「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加

実装結果

Tutorial:Tween24.js | 好かれるマーケティング研究室

まとめ

Tween24.jsを使うことで、簡単にアニメーションを実装することができました。書き方が直感的でわかりやすいので、使い方をすぐに覚えることができました。

他のアニメーションもどんどん試してみたくなりますね！

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ