Motion by BaZz

Motion by BaZz - Ease Edictor & Scroll Animation Preview

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

📹 See It In Action

CSS Easing Editor — Drag control points to edit cubic-bezier curves live:

JavaScript Output — Generate spring physics and easing arrays:

⚡ Quick Start

1   Install from the VS Code Marketplace

2   Click the Motion icon in the Activity Bar

3   Choose your tab:

• Easing — Design cubic-bezier curves
• Spring — Generate spring physics animations
• Ranges — Configure scroll-driven animations
• Keyframes — Create and edit CSS @keyframes

4   Design visually & copy the generated CSS or JavaScript

🧩 Works Where You Write Motion

Put your cursor on a value — the panel loads it, and your edits go back to exactly that value.

.card {
  transition:
    opacity 1s ease,
    scale 0.1s ease;   /* ← cursor here edits only `scale` */
}

The status bar shows what's being edited (e.g. transition › scale (2/2)). Only the value you change is rewritten — tweaking duration never turns ease-out into a cubic-bezier().

🎯 Features

• 🟣 Cubic-Bezier Easing — Drag control points to create custom easing curves for animations and transitions
• 🟢 Spring Physics — Generate smooth spring animations with customizable damping, bounciness, and mass
• 🔵 Scroll-Driven Animations — Visually configure animation-timeline and animation-range for scroll-triggered effects
• ⚙️ Keyframes Editor — Create and edit CSS @keyframes with visual timeline and frame-by-frame control
• ✨ SCSS IntelliSense — Auto-complete and hover hints for SCSS built-in modules (bonus feature)

📖 Tab Usage Guide

🟣 Easing Tab — Cubic-Bezier Curves

Purpose: Create custom cubic-bezier easing functions for CSS animations and transitions.

How to use:

1. Open the Motion Editor from the Activity Bar
2. Click the Easing tab
3. Drag the two control points on the canvas to shape your curve
4. Adjust Duration (0.1–10s or custom value in seconds/milliseconds)
5. Watch the preview animation update in real time
6. Copy the generated CSS (cubic-bezier(...)) or use it directly

Output formats:

• CSS: cubic-bezier(0.25, 0.46, 0.45, 0.94) — Copy into animation-timing-function or transition-timing-function
• Single-line CSS: animation: name 2s cubic-bezier(...);
• Multi-line support: Edit multi-line animations and they auto-consolidate to single-line

Tips:

• Drag point 1 (left) to control the acceleration
• Drag point 2 (right) to control the deceleration
• Use the duration input to test with any time value (supports both 1s and 1000ms)

🟢 Spring Tab — Physics-Based Animations

Purpose: Generate smooth, natural spring animations with configurable physics parameters.

How to use:

1. Switch to the Spring tab
2. Adjust sliders or type values:
   • Duration: Total animation time (0.1–10s or custom)
   • Bounciness: Spring overshoot intensity (0–100)
   • Mass: Weight of the animated object (affects resistance)
   • Damping: Energy loss per oscillation (affects settling time)
3. View the visualization:
   • Spring curve with oscillations plotted
   • Damping analysis (Critically damped, Underdamped, Overdamped)
   • Settling time and max overshoot metrics
4. Preview the animation in action
5. Copy output in your preferred format

Output formats:

• CSS: linear(0.0, 0.184, 0.507, 0.780, 0.948, 1.0, ...) — Use in animation-timing-function

• JavaScript Object:

  {
    duration: 1654,           // milliseconds
    ease: [0, 0.184, 0.507, 0.780, 0.948, 1.0]  // interpolated values
  }
  

Use cases:

• Framer Motion: <motion.div transition={springParams} />
• React Spring: useSpring({ config: { ...springParams } })
• Web Animations API: element.animate(keyframes, { duration: springParams.duration })

Tips:

• Bounciness 0 = No bounce (overdamped)
• Bounciness 50–70 = Smooth, natural feel
• Bounciness 100 = Maximum bounce (lively)
• Use presets for quick starting points

🔵 Ranges Tab — Scroll-Driven Animations

Purpose: Visually design scroll-triggered animations using animation-range and animation-timeline.

How to use:

1. Switch to the Ranges tab
2. Simulate scrolling using the scroll position slider to preview the animation at different scroll points
3. Select timeline type:
   • view() — Triggers when element enters/exits viewport (most common)
   • scroll() — Binds to document scroll position
   • document — Links to full page scroll progress
4. Choose range anchors:
   • cover — Entire scroll range
   • entry — When element enters viewport
   • exit — When element leaves viewport
   • contain — Element fully visible
5. Set start and end percentages to define when animation plays within the range
6. Watch the preview update with realistic animation effects (opacity, scale, rotation, movement)
7. Copy the complete, ready-to-use CSS with example keyframes and proper configuration

CSS Output includes:

✓ Selector & animation property — Connects the animation ✓ Timeline configuration — Which scroll event triggers it ✓ Animation range — When the animation plays ✓ Example keyframes — Starting point for your custom effects

Example output:

.scrollElement {
  animation: scrollTransition 2s ease-in-out forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
}

@keyframes scrollTransition {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

Tips:

• Real-time preview — The animated square shows opacity, scale, rotation, and movement as you scroll
• Start/End markers — Green (START) and red (END) lines show exact trigger points
• Customization — Replace the example selector, keyframes, and values with your own
• Browser support — Requires modern browsers with Scroll-Driven Animations support
• Combine effects — Use multiple scroll-driven animations on the same element for complex sequences

🎨 General Tips

• Duration formats: Both 1s and 1000ms work seamlessly — the extension auto-converts
• Multi-line support: Write animations across multiple lines; they automatically consolidate when updated
• Real-time preview: All changes update the preview immediately
• Copy to clipboard: Use the Copy button to grab CSS output instantly
• Keyboard shortcuts: Press Tab to switch between inputs, Enter to apply changes

🔗 Links

• GitHub Repository
• VS Code Marketplace
• Developer