Skip to content

Releases: joshwcomeau/react-flip-move

v0.1.5

03 Feb 13:24
Compare
Choose a tag to compare
v0.1.5 Pre-release
Pre-release

Add support for single-child animations

Up until now, I've been working on the assumption that FlipMove will wrap around an array of elements. This assumption was challenged while building out the demos, as I wanted a single element to move around depending on state.

The problem is that React makes no attempt to convert single children to an array, so I had to do that manually, using the React.Children.toArray helper.

This release also includes a bunch of refactoring and improvements.

v0.1.4

02 Feb 02:09
Compare
Choose a tag to compare
v0.1.4 Pre-release
Pre-release

Support string numbers for propTypes

PropTypes only took a number for staggerDurationBy, but it feels weird to specify a number for a prop. Better to accept numbers or strings, and do the conversion within (which is done by multiplying the number).

v0.1.3

31 Jan 22:59
Compare
Choose a tag to compare
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

v0.1.2

31 Jan 18:34
Compare
Choose a tag to compare
v0.1.2 Pre-release
Pre-release

Improvements to logic concerning brand-new and just-destroyed DOM elements.

One problem with the original implementation is it didn't handle items entering/leaving the DOM very gracefully. Items on enter would animate, often from the wrong position. Items on leave could throw errors.

I refactored the on-update logic to skip animation on a specific child if that child:

  • Was stationary (untracked)
  • Was brand new (no history)
  • Was just destroyed.

I also made some small improvements, such as batching all .setState requests instead of making several individual ones.

v0.1.1

31 Jan 00:54
Compare
Choose a tag to compare
v0.1.1 Pre-release
Pre-release

Lots of tiny bug fixes and cleanup, including:

* Fix a typo in eslint
* Remove unused polyfill for Object.assign in .babelrc
* Remove timer helper and the timer helper test, as it did not get
used
* Made src/index point to FlipMove
* Renamed FlipMove.jsx to FlipMove.js

v0.1.0

31 Jan 00:39
Compare
Choose a tag to compare
v0.1.0 Pre-release
Pre-release

Initial release. Base functionality is complete, test coverage is present (albeit marginal).

README is still incomplete, and a few sanity checks may be added to the component.