パスアニメーション(モーションパス)のコードスニペット8選

Webアニメーション黄金時代である今、アニメーションを実装する方法はたくさんあります。JavaScriptライブラリを利用するのが主流ですが、CSSにすでに組み込まれているアニメーション効果を使うのも良いでしょう。

今回はパスを使ったアニメーション（パスアニメーション、モーションパスとも）のスニペット8選をご紹介します。開発者が工夫を凝らして作った、ユニークな作品を参考にしてみましょう。

※PCからの閲覧を推奨します

1. 動く署名

署名を動かすというアイデア自体は、とくに新しいものではありません。テレビや映画で登場することもあります。

しかしこの例からもわかるように、動く署名は上品な雰囲気を演出するのにぴったりです。SVGとJavaScriptを組み合わせて、滑らかかつシャープな効果を実現しています。

See the Pen
SVG Signature Animation by Lloyd Fenton (@lloydfenton)
on CodePen.

2. 虹色のハート

色がそれぞれを追いかけるように、ハート型に動く作品。

ハート型に動くだけでもじゅうぶん魅力的ですが、グラデーションと組み合わせることでさらに作品の魅力が増しています。

See the Pen
Chunky Gradient Along SVG Path by Shaw (@shshaw)
on CodePen.

3. バラバラに砕け散る＆収束する文字

アニメーションを使ってイラスト同士をくっつけることも可能ですが、逆に壊すこともできます。この作品は、GSAPを使って文字を砕け散らせています。

文字の上にカーソルを移動させると、動きがスローモーションになるところもユニークですね。

See the Pen
Shattering Text Animation by Arsen Zbidniakov (@ARS)
on CodePen.

4. うねりながらスライドするサムネイル

スライダーのデザインはたいてい似たり寄ったりですが、この作品は例外です。

サムネイルが波状のパスに沿ってレイアウトされており、クリックすると背景にフルサイズの画像が表示されます。

See the Pen
Path Slider Advanced Images by lmgonzalves (@lmgonzalves)
on CodePen.

5. カーソルに吸い付くメニュー

パスは多くの場合、アニメーションを制御するために使われます。しかしこのアニメーションにコントロールされるのは、むしろユーザーのほうです。

カーソルを動かすと、メニューが吸い付くようにして表示されます。パスアニメーションは形状を作るだけでなく、インタラクティブな機能としても活用できることがわかりますね。

See the Pen
SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292)
on CodePen.

6. 地図と相性抜群の点線アニメーション

このDrawSVGのデモンストレーションでは、動く点線の使い方が紹介されています。

点線のパスアニメーションに多くの可能性が秘められていることが、ひと目でわかりますね。

See the Pen
Using DrawSVG for dashed paths by Craig Roblewsky (@PointC)
on CodePen.

7. 複雑で美しいスカル描画

滑らかに動く複雑な線が魅力的な作品。繊細なSVG画像と、パスアニメーションの正確さが魅力の秘密です。

「DRAW AGAIN（もう一度描画する）」ボタンを押すことにより、繰り返しアニメーションが見られます。

See the Pen
SVG Path Animation by Ali Klein (@AliKlein)
on CodePen.

8. 流れるライン

ピンクフロイドのCDジャケットを思わせるパスアニメーション。CSS変数を使用したSVGベースのアニメーションを簡単に作れる「Lengthy」を使っています。

異なるテクニックを組み合わせた、こだわりが感じられる作品です。

See the Pen
Lengthy: CSS Vars for SVG Path Length by Shaw (@shshaw)
on CodePen.

おわりに

パスアニメーション（モーションパス）自体は、それほど劇的な存在ではないかもしれません。しかし、Webサイトに効果的な彩りを与えるにはぴったりです。

今回ご紹介したスニペットは、数ある作品の中のほんの一部にすぎません。皆さんもぜひ、ユニークなパスアニメーションを作ってみてください。

（原文： Eric Karkovack　翻訳：Asuka Nakajima）

こちらもおすすめ！▼