Overview

motion.dev/
motion-hooks - github.com/tanvesh01/motion-hooks
tanvesh01/motion-hooks Web Animations APIを使った軽量で高速なオープンソースのアニメーションライブラリ・「Motion One」

Web Animation API 準拠の animation library
- Web Animations API を利用する - developer.mozilla.org
- 素のJavaScriptだけでアニメーションを実装するWeb Animations API
react など特定 library 向けではないが 3rd party の motion-hooks と組み合わせて hook 的に使える
github は sponsor のみ開放なので issue とか見たいなら課金しろとのこと
chrome extension で animation の調整ツール出してるのすごい
- https://motion.dev/tools
- https://chrome.google.com/webstore/detail/motion-devtools/mnbliiaiiflhmnndmoidhddombbmgcdk

まだ beta 感あるけど、多機能かつ調整ツールもあってゲーム開発には凄くマッチしそう。あと web animation api の学習コストが css の animation 周りに比べて楽そうなので、チーム利用もいけそうな気がする。

点滅とか hover でふわっと拡大とか、シンプルなのは従来のもので十分だけど、柔軟なタイミング制御とか、タイムラインとか、もうちょい色々やるならこいつ使っていいかな。

Getting Started

$ npm i motion-hooks motion

import React, { useEffect } from 'react'
import { stagger } from 'motion'
import { useMotionAnimate } from 'motion-hooks'

function App() {
  const { play, isFinished, replay } = useMotionAnimate(
    '.listItem', // ref にもできるぽい
    { y: -20, opacity: 1 },
    {
      delay: stagger(0.3),
      duration: 0.5,
      easing: [0.22, 0.03, 0.26, 1],
    },
    {
      onFinish: () => {
        // こういうのあると安心する
      },
    },
  )

  // Play the animation on mount of the component
  useEffect(() => {
    play()
  }, [])

  return (
    // Replay the animation anytime by calling a function, anywhere
    <div className="App">
      <button disabled={!isFinished} onClick={() => replay()}>
        Replay
      </button>

      <ul className="list">
        <li className="listItem">Item 1</li>
        <li className="listItem">Item 2</li>
        <li className="listItem">Item 3</li>
      </ul>
    </div>
  )
}

Timeline

useMotionTimeline

import { AnimationOptions } from 'motion'
import { useMotionTimeline } from 'motion-hooks'

const { play, isFinished, replay } = useMotionTimeline(
  [
    // You can use Refs too!
    [gifRef, { scale: [0, 1.2], opacity: 1 }],
    ['.heading', { y: [50, 0], opacity: [0, 1] }],
    ['.container p', { opacity: 1 }],
  ],
  { duration: 2 } as AnimationOptions,
  {
    onFinish: () => {},
  },
)

yano3nora/motion-hooks.md

Overview

Getting Started

Timeline