v0.1.3
Pre-release
Pre-release
Add staggerDurationBy
property
When transitioning a large number of items, the precision of every element moving with exactly the same rhythm and speed feels very robotic/artificial. One way to make the transition feel a little more organic is to stagger the duration. If every subsequent element takes a little bit longer to do its transition, the animation as a whole feels nicer.
Implementation
When instantiating <FlipMove>
, you can pass the staggerDurationBy
property as props. Every subsequent child will take staggerDurationBy
milliseconds longer to complete than the previous one.
For example, given this component:
<FlipMove duration="300" staggerDurationBy="50">
you'll wind up with the following durations:
Duration | |
---|---|
Element 1 | 300ms |
Element 2 | 350ms |
Element 3 | 400ms |
Element 4 | 450ms |