Docs/Components/MotionConfig

MotionConfig

MotionConfig sets defaults inherited by descendant motion.* components. Use it to share a single transition, override reducedMotion, or provide a nonce for SSR styles.

import { MotionConfig, motion } from 'motion-solidjs'

function App() {
  return (
    <MotionConfig transition={{ type: 'spring', stiffness: 220, damping: 22 }}>
      {/* every motion.* below shares this default */}
      <motion.div animate={{ rotate: 360 }} />
    </MotionConfig>
  )
}
repeat
repeat-reverse.tsxOpen ↗
import { motion } from 'motion-solidjs'

export const meta = {
  slug: 'repeat-reverse',
  title: 'Repeat & reverse',
  category: 'animations',
  description: 'repeatType "reverse" yo-yos endlessly between two states.',
  tag: 'repeat',
} as const

export default function RepeatReverse() {
  return (
    <motion.div
      class="h-16 w-16 rounded-2xl bg-grad-amber"
      animate={{ rotate: 90, scale: 1.4, borderRadius: '50%' }}
      transition={{
        duration: 1.2,
        repeat: Infinity,
        repeatType: 'reverse',
        ease: 'easeInOut',
      }}
    />
  )
}

Props

  • transition - default transition applied to every animation
  • reducedMotion - 'user' | 'always' | 'never' to opt the subtree in or out of reduced motion
  • nonce - CSS nonce forwarded to injected <style> tags (CSP)

See also