|
| 1 | +--- |
| 2 | +name: useSpring |
| 3 | +route: /useSpring |
| 4 | +order: 7 |
| 5 | +--- |
| 6 | + |
| 7 | +import DemoGrid from '../examples/components/DemoGrid' |
| 8 | +import Demo from '../examples/components/Demo' |
| 9 | +import examples from '../examples/components/examples-hooks' |
| 10 | + |
| 11 | +# useSpring |
| 12 | + |
| 13 | +```js |
| 14 | +import { useSpring, animated } from 'react-spring' |
| 15 | + |
| 16 | +// Update props by overwrite |
| 17 | +const props = useSpring(config) |
| 18 | +// Or, update props by calling an updater-function |
| 19 | +const [props, set] = useSpring(() => config) |
| 20 | +``` |
| 21 | + |
| 22 | +blabla |
| 23 | + |
| 24 | +## Interpolation |
| 25 | + |
| 26 | +* colors (names, rgb, rgba, hsl, hsla, gradients) |
| 27 | +* absolute lengths (cm, mm, in, px, pt, pc) |
| 28 | +* relative lengths (em, ex, ch, rem, vw, vh, vmin, vmax, %) |
| 29 | +* angles (deg, rad, grad, turn) |
| 30 | +* flex and grid units (fr, etc) |
| 31 | +* all HTML attributes |
| 32 | +* SVG paths (as long as the number of points matches, otherwise use [custom interpolation](https://codesandbox.io/embed/lwpkp46om)) |
| 33 | +* arrays |
| 34 | +* string patterns (transform, border, boxShadow, etc) |
| 35 | +* auto is valid |
| 36 | +* non-animatable string values (visibility, pointerEvents, etc) |
| 37 | +* scrollTop/scrollLeft ([native only](/perf), since these aren't actual dom properties) |
| 38 | + |
| 39 | +<br /> |
| 40 | + |
| 41 | +Of course the only properties that the browser can animate relatively cheaply are [composite properties](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) (opacity, transform), so you might want to watch out for that. |
| 42 | + |
| 43 | +## Config |
| 44 | + |
| 45 | +<p> |
| 46 | + <span className="highlight">Spring are configurable</span>, delays, tension, friction, resets, everything can be tuned. There are also a couple of generic presets that will cover some common ground. |
| 47 | +</p> |
| 48 | + |
| 49 | +```jsx |
| 50 | +import { Spring, config } from 'react-spring' |
| 51 | + |
| 52 | +<Spring config={config.default} /> |
| 53 | +```` |
| 54 | + |
| 55 | +| Property | Value | |
| 56 | +| ------------------------- | ------- | |
| 57 | +| config.default | { tension: 170, friction: 26 } | |
| 58 | +| config.gentle | { tension: 120, friction: 14 } | |
| 59 | +| config.wobbly | { tension: 180, friction: 12 } | |
| 60 | +| config.stiff | { tension: 210, friction: 20 } | |
| 61 | +| config.slow | { tension: 280, friction: 60 } | |
| 62 | +| config.molasses | { tension: 280, friction: 120 } | |
| 63 | + |
| 64 | +## Properties |
| 65 | + |
| 66 | +bla |
| 67 | + |
| 68 | +| Property | Type | Description | |
| 69 | +| -------- | ---- | -------- | ------- | ----------- | |
| 70 | +| from | obj | Base values, optional | |
| 71 | +| to | obj/fn/array(obj) | Animates to ... | |
| 72 | +| delay | number/fn | Delay in ms before the animation starts. Also valid as a function for individual keys: key => delay | |
| 73 | +| immediate | bool/fn | Prevents animation if true. Also valid as a function for individual keys: key => immediate | |
| 74 | +| config | obj/fn | Spring config (contains mass, tension, friction, etc). Also valid as a function for individual keys: key => config | |
| 75 | +| reset | bool | The spring starts to animate from scratch (from -> to) if set true | |
| 76 | +| reverse | bool | "from" and "to" are switched if set true, this will only make sense in combination with the "reset" flag | |
| 77 | +| onStart | fn | Callback when the animation starts to animate | |
| 78 | +| onRest | fn | Callback when the animation comes to a still-stand | |
| 79 | +| onFrame | fn | Frame by frame callback, first argument passed is the animated value | |
| 80 | + |
| 81 | +## Demos |
| 82 | + |
| 83 | +bla |
| 84 | + |
| 85 | +<DemoGrid padding={0}> |
| 86 | + {examples.filter(data => data.tags.includes('useSpring')).map(data => ( |
| 87 | + <Demo |
| 88 | + key={data.name} |
| 89 | + {...data} |
| 90 | + import={import('../examples/demos/' + data.name)} |
| 91 | + /> |
| 92 | + ))} |
| 93 | +</DemoGrid> |
0 commit comments