Nondeterministic Postrequisite Metaprotocol
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-gsap-transitionable

0.1.0 • Public • Published

react-gsap-transitionable

Enables painless GSAP integration for in/out transitions along with react-transition-group v2

Features

  • works with tweens or timelines
  • can be used as decorator
  • composes seamlessly (like with react-redux)

Installation

npm i --save react-gsap-transitionable

Usage

import GSAPTransition from 'react-grap-transitionable'
 
class AnimatedComponent {
 constructor(props) {
   super(props)
 }
 
 animationIn() {
   return TweenMax.from(this._ref.current, 0.4, {opacity: 0})
 }
 
 animationOut() {
   return TweenMax.to(this._ref.current, 0.4, {opacity: 0})
 }
 
 render() {
   return <div ref={this._ref}>Animated!</ref>
 }
}
 
export default GSAPTransition(AnimatedComponent)
// With timeline, as decorator
 
import GSAPTransition from 'react-grap-transitionable'
 
@GSAPTransition
class AnimatedComponent {
 constructor(props) {
   super(props)
 }
 
 get timeline() {
   if (!this._timeline) {
     this._timeline = new TimelineMax({paused: true})
     this._timeline.fromTo(0.3, {x: -100, opacity: 0}, {x: 100, opacity: 1})
   }
 
   return this._timeline
 }
 
 animationIn() {
   return this.timeline.play()
 }
 
 animationOut() {
   return this.timeline.reverse()
 }
 
 render() {
   return <div ref={this._ref}>Animated!</ref>
 }
}
 
export default AnimatedComponent
// Use it as you would with a normal `Transition` from `react-transition-group`
 
import {TransitionGroup} from 'react-transition-group'
import AnimatedComponent from './components/animated-component'
 
const HomePage _ => <TransitionGroup>
 <AnimatedComponent />
</TransitionGroup>

Install

npm i react-gsap-transitionable

DownloadsWeekly Downloads

2

Version

0.1.0

License

Unlicense

Unpacked Size

14.2 kB

Total Files

10

Last publish

Collaborators

  • avatar