Lottie / Bodymovin
https://gyazo.com/97c1a6ba1af1751316e54200e6145d58
After Effects のプラグインや Figma などから書き出してフロントエンドやアプリ上でアニメーションすることができるファイル形式。
パスやマスクを使うことが出来、ベクターアニメーションとして JSON に出力することで動画形式よりもファイルサイズを抑えられる。最近では ZIP に固めた dotLottie 形式も出てきているらしい。
@lottiefiles/dotlottie-web
Lottie のコミュニティである LottieFiles が提供しているライブラリ。JSON と dotLottie 形式のいずれも再生できる。今新規で採用するならこれがいいかもしれない。Emscripten を使っているため容量を食うかもしれないが……。 lottie-web
フロントエンド用の Lottie アニメーションレンダリングライブラリ。
React 用のラップしたライブラリがいくつか存在するが、そのまま lottie-web を使うことを勧める。
注意点
デフォルトで SVG アニメーションとしてレンダリングされる。アニメーションが複雑だと Safari でカクついたり表示されなかったりすることがあるため、確認しながら作るか Canvas によるレンダリングを試す必要がある。なおレンダリング方法によって After Effects で扱える機能が異なるので注意が必要。
SVG レンダリングで background-size: cover; のように全画面でのアニメーションをしたい場合は renderSettings: { preserveAspectRatio: "xMidYMid slice" } のように指定すれば良い。
pixi-after-effects
公式の lottie-web では WebGL レンダリングすることが出来ないため、PIXI.js をバックエンドに作られたライブラリ。