animatable

You can enable css-animation and css-transition for react-native easily.
Also works on web.

Install

``sh
npm install animatable
`

Usage

$3

Animation will be triggered when specified style prop changed.
When property option is specified behaviour is like css-transition.

`js
import { View } from 'react-native'
import animatable from 'animatable'

const TransitionLeftView = animatable({
property: 'left',
duration: 400,
timingFunction: 'ease-in-out'
})(View)

onClick={() => this.setState({ on: !this.state.on })}
style={{
position: 'absolute',
left: this.state.on ? 100 : 0,
top: 0,
width: 100,
height: 100,
backgroundColor: 'red'
}}
/>
`

#### Screenshot

!screenshot

$3

When keyframes option is specified behaviour is like css-animation.

`js
import { View } from 'react-native'
import animatable from 'animatable'

// define keyframes
const keyframes = {
'0%': { marginLeft: '0%', marginRight: '100%' },
'50%': { marginLeft: '25%', marginRight: '0%' },
'100%': { marginLeft: '100%', marginRight: '0%' }
}
const Bar = animatable({
keyframes: keyframes,
direction: 'alternate-reverse',
duration: 1000,
timingFunction: 'linear',
iterationCount: 'infinite',
})(View)

// render
const Indicator = (props) => (
width: 100,
height: 20,
backgroundColor: 'lightgray'
}}>
style={{
height: '100%',
backgroundColor: 'black',
}}
/>
)

`

#### Screenshot

!screenshot

Examples

$3

`js
const Bar = animatable({
keyframes: {
'0%': { marginLeft: '0%', marginRight: '100%' },
'50%': { marginLeft: '25%', marginRight: '0%' },
'100%': { marginLeft: '100%', marginRight: '0%' }
},
duration: 1000,

// you can set (prop) => value
playState: (props) => props.enabled ? 'paused' : 'running'

})(View)

onClick={() => this.setState({ enabled: !this.state.enabled })}
enabled={this.state.enabled}
/>
`

$3

`js
import styled from 'styled-components'

const Bar = styled(animatable({
keyframes: {
'0%': { marginLeft: '0%', marginRight: '100%' },
'50%': { marginLeft: '25%', marginRight: '0%' },
'100%': { marginLeft: '100%', marginRight: '0%' }
},
duration: 1000,
playState: (props) => props.enabled ? 'running': 'paused'
})(View))
height: 100%;
background-color: black;

`

Options

You have to specify millisec value for duration and delay.

You can use property values same as described on css definitions, and default values are same as css's one of web.

$3

`js
const TransitionComponent = animatable({
// required
property: 'transform',
duration: 200,

// optional
delay: 500,
timingFunction: 'linear'
})(Component)
`

$3

`js
const AnimationComponent = animatable({
// required
keyframes: {
'0%': { marginLeft: '0%', marginRight: '100%' },
'50%': { marginLeft: '25%', marginRight: '0%' },
'100%': { marginLeft: '100%', marginRight: '0%' }
},
duration: 200,

// optional
delay: 500,
timingFunction: 'linear'
iterationCount: 'infinite',
direction: 'normal',
playState: 'running',
// TODO: fillMode: 'forwards'
})(Component)
``

Demo

https://yusukeshibata.github.io/animatable/

$3

Yusuke Shibata

$3

MIT