Lottie / Bodymovin
https://gyazo.com/97c1a6ba1af1751316e54200e6145d58
After Effects のプラグインから書き出してフロントエンドやアプリ上でアニメーションすることができるツール。
After Effects のパスやマスクを使うことが出来、ベクターアニメーションとして JSON に出力できる。動画形式よりもファイルサイズを抑えられる。
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 をバックエンドに作られたライブラリ。