view_mode =

1/

all_categories=

PC表示

アイコンにモーショングラフィックが施されており、手が込んでいる。

こちらはRiveというアニメーションツールを使用して作成されており、作成後にiframeで読み込むことも可能。

作成方法などが気になる方はぜひ「アニメーション Rive」で検索してみてください。

スマホ表示

作成したアニメーションを埋め込んでいるだけなので、SP版でもPC版と同様の動きを見せることが可能。

埋め込んだソースを見るとcanvasを使用しているので、滑らかさも納得だ。

Good Company Design

https://www.gdco.design