henrique sosa - gorgeous apps with react motion and animations

Henrique Sosa@HiPlatform / São PauloGorgeous Apps with React Motion and Animations

Question to the audience quota

CSS AnimationsJavaScript Animations

Animated & Velocity-ReactReact Motion

CSS Animationsback to basics

class Input extends Component { state = { focused: false }

focus = () => { this.setState((state) => ({ focused: !state.focused })) }

render() { const { focused } = this.state return ( <input onFocus={this.focus} onBlur={this.focus} className={['input', focused && 'input-focused'].join(' ')} /> ); }}

performance

smooth transitions

CSS Classes

few state changes

Pros

not cross-platform

CSS

Cons

JavaScript Animationsspicing things up

class App extends Component {

state = {

disabled: true,

}

onChange = (e) => {

// control the state based on input length

}

render() {

const label = this.state.disabled ? 'Disabled' : 'Submit';

return (

<div className="App">

<button

style={...styles.button, !this.state.disabled && styles.buttonEnabled)}

disabled={this.state.disabled}

>{label}</button>

<input

style={styles.input}

onChange={this.onChange}

/>

</div>

);

}

}

const styles = {

input: {

width: 200,

outline: 'none',

fontSize: 20,

padding: 10,

border: 'none',

backgroundColor: '#ddd',

marginTop: 10,

},

button: {

width: 180,

height: 50,

border: 'none',

borderRadius: 4,

fontSize: 20,

cursor: 'pointer',

transition: '.25s all',

},

buttonEnabled: {

backgroundColor: '#ffc107',

width: 220,

}

}

performance

doesn’t need CSS

Pros

not cross-platform

adds complexity

Cons

Animations LibsAnimated & Velocity React

React-Native friendly ( Animated )

Flexibility

Easy implementation ( Velocity React )

Pros

Not 100% stable on the Web ( Animated )

It is another thing to learn

Performance issues ( Animated )

Auto-prefixing issues ( Animated )

not cross-platform ( Velocity React )

Cons

React MotionA spring that solves your animations

problems

class App extends Component {

state = {

height: 38

}

animate = () => {

this.setState((state) => ({ height: state.height === 233 ? 38 : 233 }))

}

render() {

return (

<div className="App">

<div style={styles.button} onClick={this.animate}>Animate</div>

<Motion style={{ height: spring(this.state.height) }}>

{

({ height }) => <div style={...styles.menu, { height } )}>

<p style={styles.selection}>Selection 1</p>

<p style={styles.selection}>Selection 2</p>

</div>

}

</Motion>

</div>

);

}

}

React Native and React Web friendly

Spring concept

Pros

Performance

It is another thing to learn

Cons

Reference Linksmedium.com/dabit3

@chenglou

Thank You(GIF quota)