Spring animations in Motion
Springs give movement a physical feel. In Motion you switch an animation to a spring with the type option and tune it with stiffness.
How it works
- Use a spring. Each card calls
animate(el, { rotate }, { type: "spring", stiffness }). The rotate target is 90 or 0 depending on the button state. [1] - Compare stiffness. The three cards share the same target but use stiffness 100, 300 and 800. Toggling the button runs all three springs again in the other direction. [1]
Run and edit it
It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.
import { useEffect, useRef, useState } from "react";
import { animate } from "motion";
const STIFFNESS = [100, 300, 800];
export default function App() {
const cards = useRef([]);
const [turned, setTurned] = useState(true);
useEffect(() => {
cards.current.forEach((el, i) => {
// Spring transition with a different stiffness per card
animate(el, { rotate: turned ? 90 : 0 }, { type: "spring", stiffness: STIFFNESS[i] });
});
}, [turned]);
return (
<div style={page}>
<div style={{ display: "flex", gap: 56 }}>
{STIFFNESS.map((s, i) => (
<div key={s} style={{ textAlign: "center" }}>
<div ref={(el) => (cards.current[i] = el)} style={card} />
<code style={{ display: "block", marginTop: 28, color: "#a5b4fc" }}>
stiffness: {s}
</code>
</div>
))}
</div>
<button style={btn} onClick={() => setTurned((t) => !t)}>
{turned ? "Rotate back" : "Rotate 90deg"}
</button>
</div>
);
}
const card = { width: 40, height: 110, margin: "0 auto", borderRadius: 10, background: "linear-gradient(#facc15, #f97316)" };
const page = { minHeight: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 18, background: "#111", color: "#eee", fontFamily: "system-ui, sans-serif" };
const btn = { padding: "8px 16px", borderRadius: 8, border: "none", background: "#6366f1", color: "#fff", fontSize: 14, cursor: "pointer" };
The cards rotate 90 degrees on load; toggle the button and compare how the three stiffness values settle. Code written by AgentGid [1].
The cards rotate 90 degrees on load; toggle the button and compare how the three stiffness values settle. Code written by AgentGid [1].Checked Oct 12, 2026: it starts without errors in Chromium with motion 14.1.0, react 19.3.0, react-dom 19.3.0. Needs WebGL.
More Motion examples
The animate() function in Motion Easing, duration and delay in Motion Stagger animations in Motion Repeating animations in Motion
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.