Connect ReactTransitionGroup and GSAP to stagger item entrances and exits
MIT License
Creates an easy bridge between ReactTransitionGroup and GSAP. This is specifically helpful with staggering a group of items in/out of view with a TweenMax-based tween on enter/leave.
If GSAP isn't a requirement for your project, you might be better off with something like react-motion.
$ npm install --save react-gsap-transition
Setup the component child element that will be transitioning. All tween values are optional and should be added to the component state. In this example they are setup in _animationOpts
.
Note the item being tweened should have a ref
of el
.
import React from 'react'
import GSAPTransitionItem from 'react-gsap-transition'
export default class extends GSAPTransitionItem {
constructor(props) {
super(props)
this.state = {
animationOpts: this._animationOptions()
}
}
render() {
return (
<div><span ref='el'>{this.props.text}</span></div>
)
}
_animationOptions() {
return {
staggerSpeed: .1,
beforeEnter: { y: '-5%', opacity: 0 },
enterAnimation: { y: '0%', opacity: 1 },
leaveAnimation: { y: '5%', opacity: 0 }
}
}
}
And to use it, your parent component should look something like this:
import React from 'react'
import MyTweenedComponent from 'my_tween_component.js'
export default class extends React.Component {
constructor(props) {
super(props)
this.state = { leaving: false }
}
render() {
return (
<div onClick={this._onClick}>
<ReactTransitionGroup>
{this._items()}
</ReactTransitionGroup>
</div>
)
}
_onClick() {
this.setState({ leaving: !this.state.leaving })
}
_items() {
let items = ['a', 'group', 'of', 'words']
if (!this.state.leaving) {
return items.map(item, i) {
let onComplete = (i == items.length - 1) ? this._onComplete.bind(this) : () => {}
<MyTweenedComponent
text={item}
key={item}
index={i}
total={items.length}
onComplete={onComplete}
/>
}
}
}
}
MIT © Neil Pullman