react-emotion-flip

Flip animations with React and emotion.

Demo

Usage

import createFlip from 'react-emotion-flip'

const FlipInstance = createFlip(options)

FlipInstance is a React component wraps the children you wish to render. The FlipInstance should only ever be rendered once at any given time, but the children can change. When FlipInstance is mounted at a new location, the animation plays from the previous location to the current one.

Create different FlipInstances if you have more than one thing you want to animate.

Options

All options are optional and have reasonable defaults.

duration

Sets animation-duration in milliseconds, defaults to 500ms.

timingFunction

Sets animation-timing-function, defaults to ease.

delay

Sets animation-delay, defaults to 0.

iterationCount

Sets animation-iteration-count, defaults to 1.

direction

Sets animation-direction, defaults to normal.

fillMode

Sets animation-fill-mode, defaults to both.

playState

Sets animation-play-state, defaults to running.

keyframes(source, target, additionalSourceProperties, additionalTargetProperties)

The function generates keyframes from the source and target Element.getBoundingClientRect(). The default keyframes translate and scale the source to the target. The function also receives addtionals source and target properties when extractAdditionalDomFromSource(element) or extractAdditionalDomFromTarget(element) are defined.

transformOrigin

Sets transform-origin, defaults to '0 0'.

playCss

Additional emotion css to compose into the animation when it plays. This can override any css property in the animation. Defaults to add nothing.

extractAdditionalDomFromSource(element)

The function returns an object with additional data from the source dom element. This will be provided as additionalSourceProperties in the keyframes function. Default to return nothing.

extractAdditionalDomFromTarget(element)

The function returns an object with additional data from the target dom element. This will be provided as additionalTargetProperties in the keyframes function. Default to return nothing.

unmountAsSource

By default this option is false. When false, the Flip component will use mounted and rendered locations as the source. Enabling unmountAsSource will use the location at the time of componentWillUnmount as the source as well. Enabling this option will allow an animation start from middle of a running animation. The reason why this option is not enabled by default is because during componentWillUnmount the children might have been moved due to other components being unmounted at the same time. This will cause the source location to be incorrect and the animation will start from the wrong place.