react-gsap-transition
v0.0.1
Published
Connect React components to GSAP to quickly stagger groups of items
Downloads
14
Readme
react-gsap-transition
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.
Installation
$ npm install --save react-gsap-transition
Usage
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}
/>
}
}
}
}
License
MIT © Neil Pullman