Linear easing generator
GeneratorConverts a spring, bounce or SVG path easing into a CSS linear() function you can paste into a transition or animation.
A web app by Jake Archibald that turns JavaScript or SVG easing definitions into a CSS linear() timing function. linear() approximates a curve with a list of points, so you can do bounce, spring and elastic effects in plain CSS that cubic-bezier() can't express.
You paste an easing function, see the curve, and tune how much the points are simplified and rounded to keep the output short. The result can go straight into a custom property and be used as an animation-timing-function or transition-timing-function.
The source is on GitHub under Apache-2.0 and runs locally with npm.
Good for
- Convert a JavaScript spring or bounce easing into CSS linear()
- Trim the number of points so the output stays small
- Replace JavaScript animation libraries for simple bounce effects
- Turn an SVG easing path into a CSS timing function
linear()
More generators
See all →Anchor position tool
GeneratorClick through position-area values and watch where an anchored element lands around its anchor.- Stars
- 16
- Last commit
- 2 years ago
- Licence
- Not stated
scroll-driven-animations.style
GeneratorDemos plus visualisers that show how scroll() and view() timelines and their ranges map to an animation, with a free video course.- Price
- Free
- Made by
- Bramus Van Damme (Google Chrome DevRel)
- Kind
- Generator
Layoutit Grid
GeneratorDraw rows, columns and named areas visually and get the grid-template CSS and matching HTML.- Stars
- 1,745
- Last commit
- 5 years ago
- Licence
- MIT
