You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This library was inspired heavily by [react-motion](https://github.com/chenglou/react-motion), which allows you to create spring-based animations by repeatedly updating an elements inline styles. When animating lots of elements at the same time, this can be a burden on performance. Also, based on my own experience, integrating with some css-in-js libraries is hard.
48
45
49
-
This is where **css-spring** enters the stage. Enter the desired starting properties and target properties of your animation, optionally adjust the spring settings and **css-spring** generates a keyframe object or formatted keyframe animation css for your spring-based animation of choice.
46
+
This is where **css-spring** enters the stage. Enter the desired starting properties and target properties of your animation, optionally adjust the spring settings and **css-spring** generates a keyframe object or keyframe animation css for your spring-based animation of choice.
50
47
51
48
The library is small and easy to work with. Nevertheless, it is in the early stages of development. There is a lot of improvements to be made - read the [Contributing](#contributing) section if you want to know how you can help.
52
49
@@ -59,11 +56,11 @@ This section lists some examples of popular css-in-js libraries such as `styled-
59
56
When used with the [styled-components](https://github.com/styled-components/styled-components)`keyframes` helper, generated keyframe animations can be applied to a styled component like this:
When used with the `keyframes` method of [glamor](https://github.com/threepointone/glamor), no special formatting is needed for pixel values:
73
+
When used with the `keyframes` method of [glamor](https://github.com/threepointone/glamor), the keyframe object can be used as-is and there is no need to convert it to a string:
This method creates spring-based keyframes. Called with start and target properties, it returns an object with the interpolated animation values.
93
+
This method creates spring-based keyframes. Called with `startProp` and `targetProp` arguments
94
+
reflecting the starting and ending properties of the animation, it returns an object with the
95
+
interpolated animation values.
96
+
97
+
The following properties in both the `startProp` and `endProp` objects are ignored when
98
+
calculating the animation:
99
+
100
+
- properties that do not exist in both arguments
101
+
- properties that have non-numeric values
102
+
- properties with units that differ between both arguments
97
103
98
104
#### Arguments
99
105
100
-
-`start` (_Object_): The start properties for the animation. The keys should be css properties, the values should be able to be parsed to a number by `parseFloat`. Keys that can not be parsed or do not exist in the target properties are ignored.
101
-
-`target` (_Object_): The target properties for the animation. The keys should be css properties, the values should be able to be parsed to a number by `parseFloat`. Keys that can not be parsed or do not exist in the start properties are ignored.
106
+
-`startProps` (_Object_): The start properties for the animation.<br>
107
+
```javascript
108
+
// `startProps` example
109
+
{ 'margin-left':'0px', opacity:0 }
110
+
```
111
+
-`endProps` (_Object_): The end properties for the animation.<br>
112
+
```javascript
113
+
// `endProps` example
114
+
{ 'margin-left': '250px', opacity: 1 }
115
+
```
102
116
-`options` (_Object_, optional): Animation options with these properties:
103
117
-`precision` (_Number_, optional, defaults to `3`) Specifies the number of decimals in the rounding of interpolated values.
104
118
-`preset` (_String_, optional): Presets for`stiffness` and `damping`, overriding any stiffness and damping values given. Available presets:
@@ -115,44 +129,65 @@ An object with `0%` to `100%` keys and the interpolated physics-based values for
115
129
116
130
```javascript
117
131
{
118
-
"0%": { "left":0 },
119
-
"1%": { "left":3 },
120
-
"2%": { "left":8.544 },
132
+
"0%": { "margin-left": "0px" },
133
+
"1%": { "margin-left": "3px" },
134
+
"2%": { "margin-left": "8.544px" },
121
135
// 3% … 98%
122
-
"99%": { "left":249.981 }
123
-
"100%": { "left":250 }
136
+
"99%": { "margin-left": "249.981px" }
137
+
"100%": { "margin-left": "250px" }
124
138
}
125
139
```
126
140
127
-
### `format(keyframes, formatter)`
141
+
### `toString(keyframes, formatter)`
128
142
129
-
This method takes the return value of `spring` and formats it to valid css (with corresponding units). As of now, the interpolated key-frame values are unitless because units are stripped at creation. Simple formatters that add `px`, `em` or `rem` units to every property value are available as `format.PX_FORMATTER`, `format.EM_FORMATTER` and `format.REM_FORMATTER`.
143
+
This method takes the return value of`spring` and converts it to a css string.
130
144
131
145
#### Arguments
132
146
133
147
-`keyframes` (_Object_): The interpolated animation values object given by `spring`.
134
-
-`formatter` (_Function_, optional, defaults to `format.PX_FORMATTER`): The formatter function that is invoked for every property/value combination.
148
+
-`formatter` (_Function_, optional): The formatter function that is invoked for every property/value combination.
149
+
```javascript
150
+
// default formatter
151
+
(property, value) => `${property}:${value};`
152
+
```
135
153
136
154
#### Returns
137
155
138
-
A formatted css keyframes string.
156
+
A css keyframe string.
139
157
140
158
#### Example
141
159
142
-
A keyframes object based on `startValues = { opacity: 0, left: '10px' }` and `targetValues = { opacity: 1, left: '20px' }` will have all units (in this case, `px`) removed from the interpolated values. In order to get css with the correct unit for the interpolated `left` values, but no unit for the interpolated `opacity` values, write your own formatter such as this:
160
+
A keyframes object based on `startValues = { rotate: '0deg', left: '10px' }` and `targetValues = { rotate: '180deg', left: '20px' }` will be converted to this css string:
161
+
162
+
```css
163
+
0%{rotate:0deg;left:10px}
164
+
/* ... */
165
+
100%{rotate:180deg;left:20px;}
166
+
```
167
+
168
+
In order to have this formatted to a valid css transform, you could use a custom formatter like this one:
There's a lot of ideas floating in my head that could make working with **css-spring** easier. Some of these are:
153
189
154
190
- allowing the interpolation of array values like margins, paddings or translates ([#1](/../../issues/1))
155
-
- automatically detecting css-units and re-applying them to the interpolated values of the keyframe animation ([#2](/../../issues/2))
156
191
- color interpolation ([#3](/../../issues/3))
157
192
158
193
Feel free to contribute with your own issues and ideas, your thoughts on the ones listed above, example documentation for usage with other css-in-js frameworks or pull requests for features/improvements you'd like to see.
0 commit comments