Motion — CSS Animation Editor: Easing, Spring Physics & Scroll-Driven

BaZz

148 installs

Visual CSS animation editor — design cubic-bezier easing curves, spring physics (linear() easing), scroll-driven animations (animation-timeline, animation-range), plus SVG path, scroll animation, SVG loaders, CSS modern queries & gradient builder cheat sheets. Generate production-ready CSS with live

Installation

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

Copied to clipboard

More Info

Motion — CSS Animation Editor for VS Code

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

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

🟢 Spring Tab — Physics-Based Animations

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

🔵 Scroll Tab — Scroll-Driven Animation Ranges

Switch to the Scroll tab
Use the scroll position slider to simulate scrolling
Select range names (cover, entry, exit, etc.)
Adjust start/end percentages to define your animation window
Choose an animation effect to preview
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

Made with love for the CSS animation community