LottieとCSS Animationを組み合わせて簡単な動きを作る
はじめに
GIF使おうとしたけどちょっと重すぎるな…Webpみたいに軽量化された動くやつはないのかなと考え、調べた結果少しキャッチアップが遅いもののLottieというものに出会いましてLottieを実際に作ってみたり色々と触っていく中で気づいたことを残したいと思います。
Lottieとは
簡単に言うと軽量でベクター画像を動かすので綺麗で動かす速度とか色々変えれたりJsonデータをJavaScriptなどで制御したりする為GSAPなどで色々出来たりと自由度が高めのいい感じのやつらしいです。Lottie自体は結構前からあり、その後Adobe XDでのサポートが始まったことでその頃から色々と記事とかも描いてくれる方が増えたらしく今回目に留まりました。
今回参考にした記事
個人でAdobeと契約していないしAfter Effectなんて触ったことないよ！という私にとって非常にありがたいFigmaとLottieFilesで完結する非常にありがたい記事でした。ありがとうございます。
先に完成品
先に完成品を紹介させていただいて順を追って紹介していきたいと思います。
左上：上記参考記事を元に作成したもの
右上：LottieFilesに掲載されていたもの
下：LottieFilesに掲載されていたものをCSSアニメーションで動かしたもの
↑下の方にスクロールできます
左上：上記参考記事を元に作成したもの
個人的に満足のいく出来とはなりましたが、自由度は低いなと思いました。
ここがこう動いてというアニメーションを作成出来るわけでは無く、LottieFilesが動きを何パターンか見せてくれてその中から選ぶという感じだったのでしっかりと作り込んだり理想の動きがある場合はAfterEffectで作った方が良さそうです。
右上：LottieFilesに掲載されていたもの
LottieFilesを見ていて専門の方々が作った作品を見ていると本当にすごいなと感嘆させられました。そしてこれ動かしたりとかして色々出来ないかなと考えました。その結果が次になります。
下：LottieFilesに掲載されていたものをCSSアニメーションで動かしたもの
私が調べた限りですと、Lottieを動かすとなるとGSAPを用いるという記事を何件か拝見させていただきました。GSAPや最初から搭載されている機能を使った方がスクロールやユーザーアクションに合わせたインタラクティブな実装ができるのでわざわざ使う必要もないということだとは思うのですがGSAP触ったことないよ分からないよという人がいた場合にCSSでも動かすことはできるよというだけの記事です。
SVGごと、Lottieの動きに合わせてCSSアニメーションで動かして少しでもかわいい動きを実装する敷居が低くなればと思います。
最後に
正直私が携わっているような現場では確実に使うことのない技術ではあったのですが、Blogの中にサラッと入れるとクオリティが上がったりしそうな要素のなので機会があれば都度入れていきたいと思います。アニメーションごとに必要となる動きは当然変わると思うのであくまで意図からは逸脱しないように、その都度楽しみながら色々な動きを実装していけたらいいなと思います。
ここまでお読みいただきありがとうございました。
Discussion