Motion Easing Visualizer
Compare up to six animation timing curves side by side and export sampled values plus ready-to-use CSS. Springs are converted to a CSS linear() function with the error stated.
Up to 4000 characters and 1 to 6 timing functions. The table has 2 to 101 samples over a duration of 1 to 60000 milliseconds. Springs must settle within 30 seconds. Everything is computed on your device. Downloads are a CSV sample table, a JSON report with CSS values and an SVG chart. Enter one CSS timing function or spring(mass, stiffness, damping, velocity) per line. Up to 4,000 characters. Review the settings before running.
Your result
How to use Motion Easing Visualizer
- Enter one timing function per line, such as ease, cubic-bezier(0.34, 1.56, 0.64, 1), steps(4, jump-end), linear(0, 0.5 50%, 1) or spring(1, 100, 10, 0).
- Choose how many samples the table should have and the animation duration.
- Pick the error tolerance for spring exports.
- Download the curve chart, the sampled CSV table and the JSON report with CSS values.
Useful next steps
How curves are evaluated
cubic-bezier(), steps() and linear() follow the CSS Easing Functions Level 1 and Level 2 specifications from the W3C (read 16 October 2026). Bezier curves are solved for time with Newton iterations and a bisection fallback to an accuracy of 0.0000001. Named keywords such as ease and ease-in-out use their standard control points.
Springs
spring(mass, stiffness, damping, velocity) is a Happytails.ai notation for a damped harmonic oscillator moving from 0 to 1, solved in closed form. Its duration is the time after which it stays within 0.001 of the end value. Because CSS has no spring function, the export is a linear() list of evenly spaced points, and the report gives the largest difference between that list and the real spring. The list ends at exactly 1 while the spring is still up to 0.001 away, so that final step counts toward the difference.
Limits
Values are rounded to four decimals in the table. The time column spreads every curve over the duration you choose; spring curves also report their own natural duration. Browser preview of moving objects is a page feature and is not part of the downloads.