Visually design CSS animations and generate production-ready code — right inside your editor.
_{Cubic-bezier curves · Spring physics · Scroll-driven ranges · SVG paths · CSS gradients}

   

Easing Curves Drag control points to sculpt cubic-bezier() timing functions

Spring Physics Tune stiffness, damping & mass for linear() easing output

Scroll-Driven Configure animation-timeline & animation-range visually

Cheat Sheets Ease generator · SVG paths scroll · loaders · CSS queries gradient builder

⚡ Quick Start

1   Install Motion from the VS Code Marketplace

2   Click the Motion icon in the Activity Bar

3   Pick a tab — Easing · Spring · Scroll

4   Design your animation visually

5   Copy the generated CSS into your project

_{💡 Open cheat sheets anytime via the Command Palette (⌘ Shift P / Ctrl Shift P)}

---

🎯 Features

 🟣  Cubic-Bezier Easing Editor

Capability	Description
Drag-to-edit	Shape cubic-bezier() values by moving control points in real time
Live preview	See exactly how your easing affects motion on an animated element
One-click copy	Grab cubic-bezier(x1, y1, x2, y2) to clipboard instantly
Grid overlay	Labeled coordinate system for precise point positioning

/* Example output */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);

 🟢  Spring Physics Engine

Physics-based CSS animations powered by a professional damped harmonic oscillator — the same model behind React Spring, Framer Motion, and Anime.js.

• Three core parameters: Stiffness (50–500) · Damping (5–100) · Mass (0.1–5)
• Real-time visualization — see every oscillation and overshoot
• Analysis panel — damping type, oscillation count, settling time, overshoot %
• Outputs modern CSS linear() easing with accurate keyframe sampling

Preset	Feel	Best For
Gentle	Soft, slow	Page entrances, subtle reveals
Standard	Balanced	General-purpose UI animations
Snappy	Quick	Buttons, toggles, interactive elements
Bouncy	Playful	Attention-grabbing effects, notifications
Molasses	Smooth	Loading states, background transitions
Springy	Dynamic	Drag-and-drop, gesture-driven animations

/* Example output */
transition-timing-function: linear(0, 0.009, 0.037 2.5%, 0.081, ...);

 🔵  Scroll-Driven Animation Ranges

Visually configure the CSS scroll-driven animations API with a live scrolling preview.

• Simulated scroll viewport — scrub through scroll position and watch animations respond
• Range selectors: cover · contain · entry · exit · entry-crossing · exit-crossing
• 11 animation effects: reveal, fade, slide, slide-left, slide-right, rotate, flip, blur, clip-circle, clip-inset, bounce
• Quick presets: Full Cover · Entry Only · Exit Only · Contained · Entry 50% · Exit 50%
• Phase badges: Before Range → In Range → After Range

/* Example output */
animation-timeline: view();
animation-range: entry 0% exit 100%;

 🟡  Built-in Cheat Sheets

Cheat Sheet	Description
CSS Ease Generator	Visual cubic-bezier editor, spring physics simulator, and scroll-driven animation ranges
SVG Path Cheat Sheet	Interactive reference for SVG <path> commands (M, L, C, A, etc.)
CSS Scroll Animation	Visual guide to animation-timeline, animation-range, and scroll-driven properties
SVG Loaders	Animated SVG loading spinners & indicators — copy-paste ready with SMIL and CSS keyframes
CSS Modern Queries	Container queries, style queries, @layer, @property, supports, media & more
Gradient Forge Pro	Build and fine-tune CSS gradients — linear, radial, conic — with live preview and copy-ready code
List Style Playground	Interactive list styling tool with ::marker, ::before, and image icons — export CSS, HTML, and React

Open any from the Command Palette (⌘ Shift P) or the Cheat Sheets Hub.

---

⌨️ Commands

Open the Command Palette (⌘ Shift P / Ctrl Shift P):

Command	Description
Motion: Open Cheat Sheets	Open the Cheat Sheet Hub
Motion: Open CSS Ease Generator	Open the CSS ease generator in the sidebar
Motion: SVG Animation Cheat sheet	Open the SVG path commands reference
Motion: Open CSS Scroll Animation Cheat Sheet	Open the scroll-driven animation reference
Motion: SVG Loaders Cheat Sheet	Open the SVG loaders reference
Motion: CSS Modern Queries Cheat Sheet	Open the CSS modern queries reference
Motion: Gradient Forge Pro	Open the gradient builder cheat sheet
Motion: List Style Playground	Open the interactive list styling playground

The main Ease Generator panel is always available via the Activity Bar sidebar icon.

---

📖 Usage Guide

 🟣  Easing Tab — Cubic-Bezier Curves

1. Open the Motion Editor panel from the Activity Bar
2. Click the Easing tab
3. Drag the two control points on the canvas to shape your curve
4. Watch the preview animation update in real time
5. Click Copy to grab the cubic-bezier() value

 🟢  Spring Tab — Physics-Based Animations

1. Switch to the Spring tab
2. Adjust Duration and Bounciness sliders (or use a preset)
3. Observe the spring curve with oscillations mapped out
4. Review the analysis panel for damping ratio, settling time, etc.
5. Copy the generated linear() easing function

 🔵  Scroll Tab — Scroll-Driven Animation Ranges

1. Switch to the Scroll tab
2. Use the scroll position slider to simulate scrolling
3. Select range names (cover, entry, exit, etc.)
4. Adjust start/end percentages to define your animation window
5. Choose an animation effect to preview
6. Copy the animation-timeline and animation-range CSS output

---

⚙️ How It Works

Cubic-Bezier — Parametric curve mathematics

Two control points (P1, P2) define a parametric Bézier curve from (0,0) to (1,1). Drag points to reshape the curve — the cubic-bezier(x1, y1, x2, y2) output updates instantly.

Spring Physics — Damped harmonic oscillator

The spring physics model:

x(t) = 1 - e^(-ζω₀t) [cos(ωd·t) + (ζω₀/ωd)·sin(ωd·t)]

Symbol	Meaning
ω₀ = √(k/m)	Natural frequency
ζ = c/(2√(km))	Damping ratio
ωd = ω₀√(1-ζ²)	Damped frequency

The curve is sampled into keyframes to produce a CSS linear() easing function.

Scroll-Driven — CSS animation-timeline spec

Implements animation-timeline: view() and animation-range. The editor maps range names (cover, contain, entry, exit, entry-crossing, exit-crossing) and percentage offsets to precise scroll positions, then simulates the animation in a scrollable viewport preview.

---

🔌 Programmatic API

Import the spring physics engine directly:

import {
  calculateSpringValue,
  generateLinearEasing,
  generateCSSCode,
  SPRING_PRESETS,
  analyzeSpring
} from './spring-physics';

const config = SPRING_PRESETS.snappy;
const css    = generateCSSCode(config, 1.5);
const info   = analyzeSpring(config, 1.5);

_{See SPRING_PHYSICS_GUIDE.md and spring-physics-examples.ts for full docs.}

---

📋 Requirements

Dependency	Minimum
VS Code	1.109.0+
Browser support	CSS linear() easing & animation-timeline

🛠 Development

npm install          # Install dependencies
npm run compile      # Compile TypeScript
npm run watch        # Watch mode
# Press F5 in VS Code → launch extension in debug mode

---

📝 Release Notes

  0.0.6 — Cheat Sheets

• SVG Path Cheat Sheet — interactive reference opened via Command Palette
• CSS Scroll Animation Cheat Sheet — visual guide opened via Command Palette
• Two new commands added

  0.0.5 — Scroll-Driven

• Scroll-driven animation ranges editor with live scroll preview
• 11 animation effect presets
• Quick preset buttons for common ranges

  0.0.2 — Spring Physics

• Damped harmonic oscillator engine
• Bounciness slider and spring presets
• Real-time curve visualization and analysis
• CSS linear() easing generation

  0.0.1 — Initial Release

• Interactive cubic-bezier easing curve editor
• Live preview animation
• Copy to clipboard

---