Blog ブログ
今回はSVGのpathにそって動くgsapの機能を紹介します。
導入から基本の使い方、MotionPathPluginについて解説していきます。
ローディングアニメーションを作りながらみていきます。
※イメージは1度だけ再生されます。 もう一度ご覧になる場合は、ブラウザをリロードしてください。
1.導入
それでは始めていきましょう。
CDN、NPMでも設定できますが、今回はダウンロードで進めていきます。
公式サイトをみるととてもわかりやすく説明してくれています。私は動画に日本語字幕をつけて確認しました。
ダウンロードをしたフォルダにはいろいろ入っていますが、gsap.min.jsとMotionPathPlugin.min.jsを使用します。
gsap.min.jsがgsapを使うための基本のファイルで、他のファイルは機能を追加するためのプラグインです。 任意のフォルダに入れて、scriptタグをセットしておきましょう。
<script src="/js/MotionPathPlugin.min.js"></script>
<script src="/js/gsap.min.js"></script>
<script src="/js/common.js"></script>これでgsapを使うことができるようになりました。
プラグインを使うときは1行記述が必要です。（最初に一回だけでよいです。）
gsap.registerPlugin(MotionPathPlugin);//MotionPathPlugin使うよ！2.基本の使用法
機能については、なんでもできすぎて覚えきれません！
今回使うものだけピックアップして紹介していきます。
gsap.to("第一引数に対象" , {第二引数に処理})これが基本の形です。実際に四角形を作って動かしてみましょう。
<div class="box"></div>.box {
width: 100px;
height: 100px;
background: tomato;
}gsap.to(".box" , {
//処理
x: 100, //右に100px
duration: 1, //1秒かけて動く
delay: 1, //1秒後に動く
rotate: 360, //360度回転する
borderRadius: 50, //丸くなる
scale: 0.5,
});このように、対象を指定して処理を書いていきます。 1秒待って、右に100px動きながら360度回転しながら半分サイズになりながら丸くなるのを、1秒かけてやります。
cssのプロパティがわかれば、直感で書けそうです。
そしてもう一個、gsap.fromです。
gsap.from(".box" , {
//処理
x: 100, //右に100px
duration: 1, //1秒かけて動く
delay: 1, //1秒後に動く
rotate: 360, //360度回転する
borderRadius: 50, //丸くなる
scale: 0.5,
});gsap.toをgsap.fromにすると、処理された状態から元の状態に動きます。逆再生みたいですね。
他にも便利機能がたくさんありますが、今回はこの2つで作っていきます。
3.Motion Path
続いて今回の主役であるMotion Pathについて紹介していきます。
svgの画像を用意して早速動かしてみましょう。
svgタグで直接置きます。
中身はいろいろ書いてありますが今回使うのはpathです。 pathに任意のidを記述するか、Mから始まる数字を全部コピーしてjsに張り付ける方法がありますが、今回はidをつけます。
あとはpathに沿って動くdivを置いて、スタイル調整したら準備完了です。
.img {
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ball {
width: 50px;
height: 50px;
background-color: #0bd;
border-radius: 50%;
}それでは用意したSVGのpathに沿って動くようにJavaScriptを記述していきます。
gsap.registerPlugin(MotionPathPlugin); //MotionPathPluginを使うよ！
gsap.to(".ball", {
duration: 3, //3秒かけて
repeat: 0, //1度だけ
motionPath: {
path: "#MotionPath", //指定したpath
align: "#MotionPath", //指定したpathの上で動く
alignOrigin: [0.5, 0.5] //指定したpathの中心で動く
}
});
これでballがpathにそって動きます！
画像の外枠の線に沿って水色のボールがぐるりと一周まわります！
4.ローディングアニメーションを作ってみる
記述を増やしてローディングアニメーションを作ってみます。
流れとしては、
1-時間経過のバーとボールが動きます。
2-3秒後にテキストとボールが消えます。
3-画像を表示させます。
順番に記述していきましょう。
Now Loadingのテキストと、時間経過を表現するバーを追記します。
<div class="box">
<p class="txt">Now Loading</p>
<div class="line">
<div class="fill"></div>
</div>
</div>.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.txt {
font-size: 64px;
text-align: center;
}
.line {
width: 300px;
height: 10px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.fill {
width: 100%;
height: 100%;
background-color: #000;
transform: scaleX(0);//←ここをgsapで動かします！
transform-origin: left;
}
このようになりました。
続いて”.fill”を対象にscaleXの値を1倍に変化させ、テキスト部分を消すところまで記述します。
gsap.to(".fill", {
duration: 2, //2秒かけて
scaleX: 1, //横幅を1倍に
ease: "linear" //イージングはlinear
});
gsap.to(".fill, .line ", {
delay: 2, //2秒待ってから
opacity: 0, //透明度を0に
});
gsap.to(".fill, .line, .txt", {
delay: 3, //3秒待ってから
duration: 0.5, //0.5秒かけて
y: -30, //上に30px移動しながら
opacity: 0, //透明度を0に
});これでテキスト部分は準備完了です。
delayプロパティを調整して、動きを合わせました。
また、第一引数の対象は、カンマで区切って複数選択することも可能です。
続いて画像部分の記述をしていきます。
gsap.to(".ball", {
duration: 3, //3秒かけて
repeat: 0, //繰り返しなし
motionPath: {
path: "#MotionPath", //モーションパスの指定
align: "#MotionPath", //パスに沿って移動
alignOrigin: [0.5, 0.5], //パスの中心に合わせる
}
});
gsap.to(".ball", {
delay: 2.5, //2.5秒待ってから
opacity: 0, //透明度を0に
})
gsap.from(".img", {
delay: 3, //3秒待ってから
duration: 0.5, //0.5秒かけて
y: 30, //下から上に30px移動しながら
opacity: 0, //透明度を0から1に
});
gsap.to(".img", {
delay: 3.5, //3.5秒待ってから
duration: 0.5, //0.5秒かけて
y: -30, //上に30px移動しながら
opacity: 0, //透明度を0に
});これで完成です。
※イメージは1度だけ再生されます。 もう一度ご覧になる場合は、ブラウザをリロードしてください。
5.おまけ～MotionPathHelper～
もし思い通りのpathじゃなかったり、pathを自由にカスタムしたいならMotionPathHelperを使ってみましょう。
複雑な画像だと、pathが絡み合っていて上手く動作しないことが、しばしばあります。
複雑な画像に変えて、idをPathHelperとして記述しました。
公式サイトからダウンロードしたフォルダに「MotionPathHelper.min.js」があるので任意のフォルダに入れて読み込みます。
<script src="/js/MotionPathHelper.min.js"></script>
<script src="/js/MotionPathPlugin.min.js"></script>
<script src="/js/gsap.min.js"></script>
<script src="/js/common.js"></script>そしてMotionPathHelperを呼び出してみましょう。
gsap.registerPlugin(MotionPathHelper);// MotionPathHelper使うよ！
MotionPathHelper.create("#PathHelper");// 開発者向けUIだして！
ブラウザ上に青色の線と「COPY MOTION PATH」ボタンが出現しました。
青色の線をドラッグしたり、ALT+クリックで点を増やすことができます。
思い通りの線が描けたら「COPY MOTION PATH」をクリックしてpathを指定してみましょう。
gsap.to(".ball", {
duration: 3, //3秒かけて
repeat: 0, //繰り返しなし
motionPath: {
path: "M79.33118,-115.79324 C25.72618,-69.76924 31.58018,-38.49824 47.58118,-21.49....//略
align: "#PathHelper",
alignOrigin: [0.5, 0.5],
}
});先ほど描いたpathの上を走ります。
画像の外周に沿うイメージを掴みやすいように、opacityを0.1からスタートしました。
※イメージは1度だけ再生されます。 もう一度ご覧になる場合は、ブラウザをリロードしてください。
さいごに
いかがでしたでしょうか。
以前は一部機能に有料ライセンスが必要でしたが、2025年4月30日以降ボーナスプラグインを含めて全ての機能が無料化されたそうですよ！HOTNEWSですね！
丁寧にお答えします！