yarn react-flip-move 0.1.3
v0.1.3

latest releases: 3.0.5, 3.0.4, 3.0.3...
8 years ago

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

Don't miss a new react-flip-move release

NewReleases is sending notifications on new releases.