Generates a keyframe list to be used inside the css `@keyframes` rule, using physically based spring motion.
npm install spring-animation-keyframesGenerates a keyframe list to be used inside the css @keyframes rule, using physically based spring motion.
Similar and inspired by react-spring, but with the objective of not relying on a Javascript runtime. That has the advantage of a much more performant animation, even when running blocking javascript. As the keyframes are pre-generated, this library does not work for dynamic animations, for example involving drag-and-drop.
yarn add spring-animation-keyframes
Usage
javascript
import { generateKeyframes, presets } from 'spring-animation-keyframes'const keyframes = generateKeyframes([
{
tension: 180,
friction: 12,
from: 0,
to: 100,
unit: 'px',
property: 'translateX',
},
{
...presets.stiff, // presets include tension and friction.
from: 1,
to: 0,
property: 'opacity',
},
],
{
// Length of the animation. Note that this does not change the animation,
// it only defines how many seconds of animation to generate. It should
// be a value sufficiently long so that the "spring" had time to settle.
// For non-extreme values of tension and friction, the default should be
// enough.
time: 0.8 // default: 1
})
`This will generate something like:
0% {
transform: translateX(0px);
opacity: 1;
}1% {
transform: translateX(1px);
opacity: 0.99;
}
2% {
transform: translateX(3px);
opacity: 0.95;
}
...
When using this animation, make sure to use
interpolation and a duration of the same value of the time argument of generateKeyframes, like this:`css
animation: spring-animation 0.8s linear;
`$3
javascript
const appearBottom = keyframes${export const Wrapper = styled.div
Presets
Theory
All the animations produced by this library follow the following spring equations:
f(0) = x0
f'(0) = v0
f''(t) = -k(f(t) - x1) - μf'(t)f(t): position
f'(t): velocity
f''(t): acceleration
μ: friction coeficient
v0: starting velocity
k: stiffness/tension
x0: starting position
x1: end position
What this library outputs are the values of