gentleduck motion

import '@gentleduck/motion/css'
import { MotionProvider, motionTransition, useDuckReducedMotion } from '@gentleduck/motion'

function App() {
  return (
    <MotionProvider>
      {/* All m.* components inside get consistent defaults */}
    </MotionProvider>
  )
}

import { MotionProvider } from '@gentleduck/motion'

function App() {
  return (
    <MotionProvider exitTransition={{ duration: 0.32 }}>
      <m.div animate={{ opacity: 1 }} />
    </MotionProvider>
  )
}

import { useMotionConfig } from '@gentleduck/motion'

function MyComponent() {
  const { exitTransition } = useMotionConfig()
  // ...
}

import type { IDuckMotion } from '@gentleduck/motion'

const preset: IDuckMotion.IPreset = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0 },
}

import { getStaggerDelay, createStagger, staggerChildren } from '@gentleduck/motion'

const delay = getStaggerDelay(index, 50, 100) // (index * 50ms + 100ms) / 1000

const delays = createStagger(5, 50, 100)
// [{ delay: 0.1 }, { delay: 0.15 }, { delay: 0.2 }, { delay: 0.25 }, { delay: 0.3 }]

delays.map(({ delay }, i) => (
  <m.div key={i} animate={{ opacity: 1 }} transition={{ delay }}>
    Item {i}
  </m.div>
))

const containerVariants = {
  animate: {
    transition: staggerChildren(50, 100),
  },
}

<m.ul variants={containerVariants} animate='animate'>
  {items.map((item) => (
    <m.li key={item.id} variants={itemVariants}>
      {item.label}
    </m.li>
  ))}
</m.ul>

import { duckMotionDuration, duckMotionDurationMs } from '@gentleduck/motion'

// Seconds (for motion library)
duckMotionDuration.instant  // 0
duckMotionDuration.fast    // 0.15
duckMotionDuration.normal  // 0.2
duckMotionDuration.slow    // 0.3

// Milliseconds (for CSS)
duckMotionDurationMs.instant  // 0
duckMotionDurationMs.fast     // 150
duckMotionDurationMs.normal   // 200
duckMotionDurationMs.slow     // 300
duckMotionDurationMs.exit     // 180 (fallback used when a transition has no measurable duration)

import { duckMotionEasing, duckMotionEasingCss } from '@gentleduck/motion'

// Cubic-bezier arrays (for motion library)
duckMotionEasing.standard  // [0.4, 0, 0.2, 1]
duckMotionEasing.exit      // [0.4, 0, 1, 1] (accelerating ease-in, for exit animations)
duckMotionEasing.expo      // [0.16, 1, 0.3, 1] (expo-out, for expand/collapse and reveals)
duckMotionEasing.easeOut   // [0, 0, 0.2, 1] (for micro-interactions and tooltips)
duckMotionEasing.spring    // [1, 0.23995, 0, 1.65]

// CSS strings (for CSS transitions)
duckMotionEasingCss.standard  // 'cubic-bezier(0.4, 0, 0.2, 1)'
duckMotionEasingCss.spring    // 'cubic-bezier(1, 0.23995, 0, 1.65)'

import { duckMotionCssVar } from '@gentleduck/motion/transitions'

duckMotionCssVar.duration  // 'var(--gentleduck-motion-dur, 150ms)'
duckMotionCssVar.easing    // 'var(--gentleduck-motion-ease, cubic-bezier(0.4, 0, 0.2, 1))'

import {
  tweenNormal,
  tweenSlow,
  tweenExit,
  tweenExpand,
  tweenShake,
} from '@gentleduck/motion/transitions'

import {
  springDefault,
  springBouncy,
  springGentle,
  springSmooth,
  springSnappy,
  springStiff,
  springInstant,
} from '@gentleduck/motion/transitions'

import {
  spinIn,
  tapScale,
  checkerBounce,
  contentTransition,
  contentTransitionFast,
} from '@gentleduck/motion/presets'

import {
  fadeIn,
  popIn,
  rotateIn,
  scaleIn,
  slideUp,
  slideDown,
  slideFromLeft,
  slideFromRight,
} from '@gentleduck/motion/presets'

<m.div {...fadeIn} transition={tweenNormal}>
  Content
</m.div>

import { heightAuto } from '@gentleduck/motion/presets'

<m.div animate={isOpen ? heightAuto.open : heightAuto.closed} transition={tweenExpand}>
  Collapsible content
</m.div>

import { createDirectionalPreset } from '@gentleduck/motion/presets'

const fromBottom = createDirectionalPreset('bottom')
const fromTop = createDirectionalPreset('top', 12, 40, 12)

<m.div {...fromBottom} transition={springSnappy}>
  Drawer content
</m.div>

import { createSlidePreset, createSlideEdge, createTooltipPreset } from '@gentleduck/motion/presets'

import { AnimVariants } from '@gentleduck/motion'

<div className={AnimVariants({ alive: 'default', pseudo: 'animate' })}>
  Animated content
</div>

import { checkersStylePattern } from '@gentleduck/motion'

<input
  type='checkbox'
  className={checkersStylePattern({ type: 'checkbox', indicatorState: 'both' })}
/>

import { useDuckReducedMotion } from '@gentleduck/motion'

function MyComponent() {
  const reduced = useDuckReducedMotion()
  return <m.div transition={reduced ? { duration: 0 } : tweenNormal} />
}

import { motionTransition, useDuckReducedMotion } from '@gentleduck/motion'

const reduced = useDuckReducedMotion()
const transition = motionTransition(reduced, tweenNormal)

import type { IReducedMotionFallback } from '@gentleduck/motion'

import '@gentleduck/motion/css'