コンテンツにスキップ
twelve-principles

twelve-principles

Disney のアニメーターが磨いた 12 の原則を、
UI のための TypeScript の関数にしたライブラリ。
Web Animations API の上で動き、依存はゼロ、React は任意。

クイックスタート で最初の動きを付け、
基本概念 で MotionSpec を知り、
潰しと伸ばし から 12 の原則をめくり、
レシピ で UI に仕立てる。
ガイドラインの外側 では bouncy と cartoon が跳ね回る。

npm i twelve-principles

12 の原則

Section titled “12 の原則”
personality
  1. 01Squash & Stretch潰しと伸ばしstraightAhead · deform
  2. 02Anticipation予備動作anticipate · poseToPose
  3. 03Staging演出・見せ方stagingPoses
  4. 04Straight Ahead & Pose to Pose逐次描画とポーズ間補間poseToPose · straightAhead
  5. 05Follow Through & Overlappingフォロースルーと重なりoverlap · followThrough
  6. 06Slow In & Slow Out加速と減速easings
  7. 07Arcs弧を描く動きarc · arcPoint
  8. 08Secondary Action副次的な動きaccompany · jump
  9. 09Timingタイミングdurations
  10. 10Exaggeration誇張exaggerate · jump
  11. 11Solid Drawing立体感と重さtiltToward · lift · solid
  12. 12Appeal魅力・個性enter · exit · personalities

3 行で分かる使い方

Section titled “3 行で分かる使い方”
import { anticipate, followThrough, play, enter } from "twelve-principles";
import { Motion } from "twelve-principles/react";


play(card, followThrough(anticipate(enter("rise")))); // 原則は関数なので合成できる


<Motion as="button" press hover enter="pop">保存</Motion>; // React ならプロップで宣言

設計の柱

Section titled “設計の柱”

  1. 原則 = 関数

    anticipate(spec) や exaggerate(spec, 1.5) は MotionSpec を受け取って MotionSpec を返す純粋関数。好きな順に重ねられ、テストもできます。

  2. UI 向けの既定値

    ユーザー操作は 300ms 以内、スタッガーは 1 項目 50ms 以内、入場は ease-out・退場は ease-in。押下の縮みは既定のガードレールで 2〜5% に収まり、bouncy と cartoon はその上限を外します。何も考えずに使うと良い動きになるように。

  3. 割り込みに強い

    再生中の姿勢を JS で正確にサンプリングできるので、ホバー中に押す・閉じかけを開き直すといった割り込みでも飛びません。

  4. アクセシブル

    prefers-reduced-motion を既定で尊重し、空間移動を短いフェードに置き換えます。キーボード押下にも反応します。