0.0.52 • Published 3 years ago
@spring-keyframes/driver v0.0.52
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;
`
0.0.51
3 years ago
0.0.52
3 years ago
0.0.50
3 years ago
0.0.49
3 years ago
0.0.44
3 years ago
0.0.45
3 years ago
0.0.46
3 years ago
0.0.48
3 years ago
0.0.43
3 years ago
0.0.41
3 years ago
0.0.42
3 years ago
0.0.40
4 years ago
0.0.39
4 years ago
0.0.37
4 years ago
0.0.38
4 years ago
0.0.34
4 years ago
0.0.31
4 years ago
0.0.33
4 years ago
0.0.30
4 years ago
0.0.29
4 years ago
0.0.27
4 years ago
0.0.26
4 years ago
0.0.25
4 years ago
0.0.22
4 years ago
0.0.21
4 years ago
0.0.20
4 years ago
0.0.19
4 years ago
0.0.18
4 years ago
0.0.17
4 years ago
0.0.16
4 years ago
0.0.14
4 years ago
0.0.13
4 years ago
0.0.12
4 years ago
0.0.11
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago