npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-gsap-enhancer

v0.3.0

Published

Use the full power of React and GSAP together

Downloads

587

Readme

react-gsap-enhancer Build Status Coveralls branch npm maintainance

Join the chat at https://gitter.im/azazdeaz/react-gsap-enhancer

|Demos|Why?|How it works?|Usage|API| |---------------|------------|------------------------------|---------------|-----------|

A React component enhancer for applying GSAP animations on components without side effects.

For simple use cases you might not need this tool. See this egghead.io tutorial.

Developed as part of the Animachine project.

Requirements:

Demos

Why?

We have great tools (like react-motion, or Animated) to animate the state and props of our React components but if you ever needed to create a longer animation sequence with React you can still feel the desire to reach out for a tool like GSAP which makes it easy to compose your animation and apply it on the DOM with its super performance and bulit in polyfills. Unfortunately, if you let anything to mutate the DOM of a component, React can break on the next update because is suppose that the DOM looks exacly the same like after the last update. This tool is a work around for this problem.

How it works?

It's pretty simple: in every render cycle:

  • after each render save the attributes of the rendered DOM elements than start/restart the added animations.
  • before each render stop the animations and restore the saved attributes (so React will find the DOM as it was after the update)

In this way you can even update a style of an element (like transform: 'translateX(${mouse.x})') while you animating the same style relative to its original value (like: .to(node, 1, {x: '+=300', yoyo: true})

Check it out!

Usage

First you have to enhance the component with react-gsap-enhancer:

ES5

var GSAP = require('react-gsap-enhancer')
var MyComponent = GSAP()(React.createClass({
  render: function() {/*...*/}
}))

ES6

import GSAP from 'react-gsap-enhancer'

class MyComponent extends Component {
  render() {/*...*/}
}

export default GSAP()(MyComponent)

ES7

import GSAP from 'react-gsap-enhancer'

@GSAP()
export default class MyComponent extends Component {
  render() {/*...*/}
}

Now you can attach animations to the component with addAnimation(animationSource). The animationsSource is a function that returns a GSAP Animation (ex. TweenLite, or TimelineMax) like this:

function moveAnimation(utils) {
  return TweenMax.to(utils.target, 1, {x: '+=123'})
}

the utils.target refers to the root node of the component but you can select any of it's children by they props in the good old jQuery style:

function moveAnimation({target}) {//just ES6 syntax sugar
  var footer = target.find({type: 'footer'})
  var buttons = footer.findAll({type: 'button'})
  ...
}

and later in a component you can use it like:

...
handleClick() {
  var controller = this.addAnimation(moveAnimation)
...

the addAnimation() returns a controller object that has the same API like the original GSAP Animation so you are free to control it like:

...
handleStartLoad() {
  this.progressAnim = this.addAnimation(progressAnim)
  this.otherAnim.timeScale(3.4).reverse()
}
handleProgress(progress) {
  this.progressAnim.tweenTo(progress)
}
...

API

addAnimation()
  • enhancedComponent.addAnimation(animationSource[, options]) -> controller: Add an animation to the component with the given source and returns a Controller for it. The options will be passed to the animationSource.
controller

Wraps the GSAP Animation returned from the animationSource. It's exposing the following GSAP API methods:
For TweenMax and TweenLite:

delay*, duration*, eventCallback, invalidate, isActive, pause, paused, play, progress, restart, resume, reverse, reversed, seek, startTime*, time, timeScale, totalDuration*, totalProgress*, totalTime*,

For TimelineMax and TimelineLite:

currentLabel, duration*, endTime*, eventCallback, from, fromTo, getLabelAfter, getLabelBefore, getLabelArray, getLabelTime, invalidate, isActive, pause, paused, play, progress, restart, resume, reverse, reversed, seek, startTime*, time, timeScale, totalDuration*, totalProgress*, totalTime*, tweenFromTo, tweenTo,

Notes:

  • Some of the methods above doesn't available for TweenLite and TimelineLite. Please check the GSAP docs for more detailes.
  • controller.kill() will also remove all the effects the animation made on your component.
  • As you can see the editor methods (like .to() or .add()) aren't exposed by the controller so you can only use them inside the animationSource function while you construct the animation.

* Trough the controller you can only get values with these methods.

var controller = this.addAnimation(animationSource)
controller.timeScale(2).play()
animationSource
  • ({target, options}) -> GSAP Animation

A function that returns a GSAP Animation.

function animationSource(utils) {
  return TweenMax.to(utils.target, 1, {x: 100})
}
this.addAnimation(animationSource)
target

jQuery like object that refers to the root component and lets select its children with chainable find methods and selectors.

  • target.find(selector): returns with the first match
  • target.findAll(selector): returns with all the matches
  • target.findInChildren(selector): returns with the first match in the direct children
  • target.findAllInChildren(selector): returns with all the matches in the direct children
function animationSource(utils) {
  var button = utils.target.findAll({type: 'button'}).find({role: 'submit'})
  return TweenMax.to(button, 1, {x: 100})
}
options

Arbitrary object. Passed to the addAnimation call as the second argument and and will be passed to the animationSource

this.addAnimation(animationSource, {offset: this.props.offset})

...

function animationSource(utils) {
  return TweenMax.to(utils.target, 1, {x: utils.options.offset})
}
selector

Selectors are usually simple objects and the "find" functions are using it to select the elements with matching props. Ie. {key: 'head'}, {color: 'red'}, and {key: 'head', color: 'red} are all matches to <div key='head' color='red'/>.

I'm looking forward for your feedback!