これはすごい便利! WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata
Post on:2024年7月23日
WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。
112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。

Animataの特徴
Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。
MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。

AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カラーやフォントサイズなどのローレベルのデザインは自由に設定できます。
アニメーション化されたUIコンポーネント
Animataには現在、15のカテゴリに112種類のアニメーション化されたUIコンポーネントが揃っています。すぐに使用しなくても、次のプロジェクトのアイデア探しとして見ておくと役立ちます。
背景のエフェクトには、6種類あります。Blurry blobはアニメーション化されたぼやけた塊の背景です。

他にもカードの背景がアニメーション化された動くグラデーションだったり、グリッドやドットや斜め線を描いた背景があります。

最近増えてきた弁当を模したBento Gridのアニメーションは、3種類。レスポンシブ対応のグリッドとして注目されています。

Eightは8つアイテムを備えたBento Gridで、アニメーション化されています。

Bento grid with eight items - Animata
ボタンのアニメーションは、11種類。定番のアニメーションからちょっと複雑なものまで揃っています。

カードのアニメーションは、8種類。Card Spreadは、ホバーで開き、クリックで広がります。

Flip Cardは、180度回転するアニメーション。水平・上下の両方に対応しています。

カルーセルは、2種類。Expandable Carouselはホバーすると画像が拡大され、詳細が表示されます。

コンテナ関連は、5種類。Cursor Trackerはカーソルの動きを追跡するラッパーコンポーネントです。

Nav Tabsはクリックすると、スムーズなアニメーションでタブが表示されます。

タブのハイライト表示の切り替えも面白いですね。

ヒーローセクションは5種類、ビジターの目を惹きつけるさまざまなアニメーションが揃っています。

Slack's intro screen - Animata
画像にちょっとしたアニメーションを加えると、より効果的な印象を与えられます。

最近はコンテンツを表示する際に、スケルトンを採用するサイトやアプリも増えてきました。

Animated Gradient Textはグラデーションがアニメーションする美しいエフェクトです。テキストのエフェクトは全部で17種類あります。

Animated Gradient Text - Animata
Bento Gridをはじめ、さまざまなシーンで利用できるウィジェット。

Animataの使い方
Animataは依存関係としてインストールする必要はなく、コードをコピペして使用するだけです。ただし、コードに必要な依存関係はインストールする必要があります。詳しくは、下記ページをご覧ください。

Animataの要件は、下記の通りです。
- スタイル設定には、TailwindsCSSが使用されています。
- 一部の複雑なアニメーションにはFramer Motionが必要です。
- 一部のコンポーネントのアイコンには、Lucide(紹介記事)のアイコンが使用されています。もちろん、他のアイコンを使用することができます。
sponsors