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

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

にしまつ@マーケティング・サイエンティスト

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

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

Tween24.jsの導入

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

現在の最新バージョンは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に詳しくない方は、下記リンクを読むとわかりやすいと思います。

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動かすアニメーションが実施されます。

画像1

初期状態の設定

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

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

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

画像2

一文字ずつ動かすには、以下のようにします。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();

画像3

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

実装結果

まとめ

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

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


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

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
スキありがとうございます!ぜひぜひフォローもお願いします(*´ー`*)
にしまつ@マーケティング・サイエンティスト
「論語と算盤」が両立する会社が素晴らしいように 「マーケティングとエンジニアリング」が両方できる人も素晴らしい …"光と闇が両方そなわり最強に見える"理論である。(違います) 最近の興味は主にPython(Django)、AWS、機械学習(ML)、行動経済学、マーケティング