Responsive Easing

Context-aware easing functions for smooth, perceptually coherent motion across responsive UIs.

[!WARNING] > 🚧 Work in Progress - This package is currently under active development. The API shown in this README is aspirational and not yet implemented. Please check back later for the actual release!

Responsive Easing adapts motion curves to real-world context—distance, time, and velocity—so animations feel smooth and natural across screen sizes, layouts, and motion segments.

✨ Why Responsive Easing?

Most easing functions assume a fixed range of motion from 0 to 1. But UI elements don’t always move the same distance or take the same time.

This leads to:

• Motion that feels too fast on large screens
• Overshoots that don’t scale properly
• Janky joins between motion segments
• Manual tweaking of durations and curves for each use case

Responsive Easing solves this by working in real units: pixels, milliseconds, slopes. It lets you create physically coherent motion that scales with your UI.

🚀 Install

npm install @penner/responsive-easing

Or with Yarn:

yarn add @penner/@penner/responsive-easing

🧪 Basic Usage

import { createResponsiveEasing } from '@penner/responsive-easing';

const easing = createResponsiveEasing({
  distance: 400, // in pixels
  duration: 600, // in milliseconds
  overshoot: true,
});

const y = easing(0.5); // evaluates easing at halfway point

Or generate a CSS timing string:

import { easingToCssLinear } from '@penner/responsive-easing';

const linearString = easingToCssLinear(easing);
// → linear(0 0, 0.2 0.1, 0.5 0.7, 1 1)

🧰 Features

• ✅ Distance-aware easing
• ✅ Cruise segments with constant velocity
• ✅ Responsive overshoot / bounce
• ✅ Velocity-matched joins
• ✅ Composable easing parts (intro, cruise, outro)
• ✅ Exportable to CSS linear() timing functions
• ✅ Works with any animation system (CSS, JS, Web Animations API, GSAP, Framer Motion)

📦 Demos

• Live playground (CodeSandbox)
• Comparison to traditional easing
• Curve visualizer

📚 Documentation

• Getting Started
• API Reference
• Design Principles
• FAQ

🧠 Philosophy

Responsive Easing treats motion as a first-class design element—one that should respond to space and time, just like layout does. If your UI adapts responsively, your motion should too.

💬 Feedback & Contributions

Have an idea? Find a bug? Want to shape the future of motion?

Open an issue or start a discussion.

📄 License

MIT © Robert Penner