Motion One コードジェネレータ アニメーション
Motion One は2024〜2025年に注目を集めている軽量モダンアニメーションライブラリです。GSAPに比べてはるかに軽量 (約4KB)、Framer Motion チームが開発しており、Web Animations API ベースで高速に動作します。本ツールで人気の演出パターン15種類のサンプルコードを生成できます。
0.8 秒
0.0 秒
1
2
3
4
使い方
- 下部の15種類の演出パターンからクリックで選択
- 上部で継続時間・遅延・イージングを調整 (spring は物理演算のため一部パラメータが効きません)
- 「もう一度再生」ボタンで動作確認 (プレビューは4つの要素で動作)
- コピーボタンで Motion One のJavaScriptコードを取得
Motion One の導入方法
生成したコードを使うには、Motion One ライブラリを読み込みます:
<!-- HTMLの </body> 直前に追加 -->
<script type="module">
import { animate, stagger } from "https://cdn.jsdelivr.net/npm/motion@11.11.0/+esm";
// ここに本ツールで生成したコードを貼り付け
</script>
Motion One の特徴
- 超軽量: 約4KB (gzip後)。GSAP の約1/5
- Web Animations API ベース: ブラウザネイティブの高速アニメ実行
- シンプルなAPI: animate(target, keyframes, options) で完結
- Spring物理演算: 自然な弾みの動きを簡単に実装
- 無料・MITライセンス: 商用利用も自由
- Framer Motion との互換: React版 Framer Motion のチームが開発
GSAP との違い
- サイズ: Motion One 約4KB / GSAP 約23KB (core)
- パフォーマンス: Web Animations API ネイティブ実行で高速
- 機能数: GSAP の方が多機能 (TimeLine・MorphSVG・ScrollTrigger等)
- 用途: シンプルなUIアニメは Motion One、複雑な演出は GSAP が向いています