Framer Motion Spring Slider Builder

// Yokaify Framer Motion spring — production-tuned
import { motion } from 'framer-motion';

export const yokaifySpring = {
  type: 'spring' as const,
  stiffness: 320,
  damping: 28,
  mass: 1,
  restDelta: 0.001,
  // Optional: cap the duration ceiling for INP discipline
  // duration: 0.4,
};

// Usage:
// <motion.div animate= x: 0  transition={yokaifySpring} />

Springs have four settings. Get the mix wrong and your slider feels janky. Start with the Gentle preset, watch the live preview, then tune from there.

What the four settings do

• Stiffness - how hard the spring pulls. Higher feels snappier. Range 20-800; most production sliders sit at 180-400.
• Damping - the brake on bounce. Higher means less wobble. For sliders, keep it at 22 or above so visitors never see a wobble.
• Mass - how heavy the motion feels. Keep it at 1 for most sliders; above 1.5 feels sluggish.
• RestDelta - when the spring decides it has arrived. 0.001 is a safe default.

How to read the result

Two things to watch:

• INP estimate - how long the interaction blocks the screen. Lower is better. Under 200 ms is the "good" cutoff; over 500 ms fails the Core Web Vitals gate.
• Wobble risk - flags configs that bounce too much before settling.

A calm slider (stiffness 180, damping 22, mass 1) lands around 70-90 ms. A bouncy one (stiffness 600, damping 12, mass 1.5) can hit 250+ ms.

What to do next

• Copy the generated config and slider component into your project.
• Animate only transform and opacity, never left, top, width, or height. Those force layout work on every frame.
• For visitors who prefer reduced motion, swap the spring for a near-instant cut between slides and turn off drag-to-swipe.
• Keep arrow-key and Tab navigation working. The generated nav buttons are real buttons in order, so this works out of the box.

The builder pairs with the Next.js Rive state machine wrapper for character animation, while these springs handle the UI motion around it.

Last verified May 24, 2026. Tested with framer-motion 11.6, React 19, and Next.js 15.5.