The spring() and tweened() Stores
Animate numeric values with physics-based spring or duration-based tweened stores.
The spring() and tweened() Stores is a free Sveltejs Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Motion Stores
Svelte provides motion-aware stores: tweened (duration-based) and spring (physics-based).
Import
From svelte/motion.
import { tweened, spring } from "svelte/motion";Creating Tweened
Pass an initial value and options like duration and easing.
const progress = tweened(0, { duration: 500 });Set or Update
Call set() or update(); the store animates between values automatically.
progress.set(1);Creating Spring
Spring stores have stiffness and damping options for physics behavior.
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });Subscribe with $
Use them like any store in components.
<p>{$progress}</p>Numbers and Objects
Both stores interpolate numbers and shapes with nested number properties.
Custom Interpolation
Pass a custom interpolate function for non-numeric values like colors.
Spring Hard
Call spring.set(value, { hard: true }) to jump without animation.
Use Cases
Mouse-tracking, drag, scroll-driven UI, gauges, progress bars.
Pair with Transforms
Apply the animated value to style="transform: ..." for smooth motion.
Quick Check
Which store gives physics-like motion?
Recap
tweened and spring from svelte/motion animate numeric values smoothly.
Frequently asked questions
Is the “The spring() and tweened() Stores” lesson free?
Yes — the full text of “The spring() and tweened() Stores” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “The spring() and tweened() Stores”?
Animate numeric values with physics-based spring or duration-based tweened stores. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The spring() and tweened() Stores” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- animate:flip for List Reordering
- The spring() and tweened() Stores
- Custom Easing Functions
- Combining transitions and animations