Generate css keyframes in css-in-js based on a spring algorithm, with emotion: https://github.com/emotion-js/emotion.

Spring transform properties: transformX, transformY, scale3d, as x, y, and scale, as well as opacity.

• The default export is wrapped in emotion's keyframes, however you can also export { spring } which returns an array you can join and use with other css-in-js solutions. (I think...)

Note: for scale, be sure to use a higher precision, like 4.

Example

This example is done for a react app, but can easily work without react with emotion

import spring from 'spring-keyframes'
import styled from 'react-emotion'
const options = {
stiffness: 80,
damping: 50,
precision: 4,
unit: 'px',
}
const Component = styled.div`
animation: ${spring({
from: {
opacity: 0,
x: 0,
scale: 0
},
to: {
opacity: 1,
x: 100,
scale: 1
}
}, options)} 300ms;
animation-fill-mode: both;
`