Cube

Cube

cube

APIReactFAQ

GitHub

Four motions.

No dials

Cubeは、ダイヤル（設定項目）のないJavaScriptアニメーションライブラリです。rise、leave、morph、revealの各アニメーションは、その目的に合わせて期間、カーブ、スタッガーが選択されています。基盤にはWeb Animations APIを使用し、依存関係はゼロです。

rise

640ms · 70ms stagger

要素の出現。不透明度と12pxの上昇、兄弟要素はスタッガー（遅延）がかかります。

leave

320ms · 40ms stagger

要素の退出。不透明度と12pxの下降、ノードが削除されるまでその状態を保持します。出現アニメーションの半分の時間です。

morph

220ms · 130ms lead

状態変化。テキストは共通の先頭文字を保持し、残りをフェードイン・フェードアウトさせます。アイコンは全体としてクロスフェードします。親要素の幅も追従します。

reveal

rise, when in view

画面外からの出現。ビューポートに入ると表示され、一度だけ上昇します。ボックスをスクロールしてみてください。

API

cube.js

import { rise, leave, morph, reveal } from "cube-motion";

rise(".hero", { targets: "children" }); // スタッガー付き出現
leave(toast);                   // スタッガー付き退出、終了状態を保持
morph(oldIcon, newIcon);        // ある状態から次の状態へ
reveal(".card");                // スクロールして表示されたときに上昇

React

import { Rise, Morph, Reveal } from "cube-motion/react";

<Rise as="section" targets="children" className="hero"> // 子要素をスタッガー表示
  <h1>Four motions.</h1>
  <button onClick={save}>
    <Morph active={saved} off="Save" on="Saved" />
  </button>
</Rise>

<Rise show={open} className="toast">Saved</Rise>   // 表示され、アンマウント前に消える

<Reveal as="ul" targets="children" className="cards">{cards}</Reveal>

Why no dials

Numbers, not options

期間、カーブ、距離は各タスクごとに固定されています。スタッガーと遅延でアニメーションの開始タイミングを制御します。

Jobs grow, dials never

Cubeは出現、退出、状態変化、スクロール表示に対応します。タイムライン、ジェスチャー、レイアウトアニメーションが必要な場合は別のツールを使用してください。

Platform underneath

Web Animations APIとIntersectionObserverを使用します。ポリフィル不要、フレームループ不要、ブラウザと競合するものはありません。

FAQ

Why not Motion or GSAP?

それらのライブラリはあらゆる設定項目を提供します。Cubeは4つの決定済みのアニメーションを提供します。タイムライン、ジェスチャー、レイアウトアニメーションが必要な場合は、それらのライブラリを検討してください。

Does Cube have dependencies?

コアライブラリにはランタイム依存関係は一切なく、ブラウザのWeb Animations APIを使用しています。React、Vue、Solid、Svelte用のアダプターはオプションのピア依存関係です。

Where did press go?

以前の press フィードバックは、scale に対する transition と :active { scale: 0.97 } という3行のCSSで実現されていました。CSSはキーボード操作にも対応するため、その機能は廃止され、代わりに leave がその役割を担うようになりました。

What about springs?

Cubeは固定のcubic-bezierカーブを使用しており、スプリングソルバーは使用していません。スプリングオプションはありません。

What happens with reduced motion?

不透明度の変化は維持されますが、移動、スケール、ぼかしは無効になります。rise と leave はフェードに、morph はクロスフェードになります。reveal は、要素がビューポートに入った際に reduced-motion の設定を適用します。