react-gsap-enhancer alternatives and similar libraries
Based on the "UI Animation" category.
Alternatively, view react-gsap-enhancer alternatives based on common mentions on social networks and blogs.
-
react-spring
✌️ A spring physics based React animation library -
react-motion
A spring that solves your animation problems. -
framer/motion
Open source, production-ready animation and gesture library for React -
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-router-transition
painless transitions built for react-router, powered by react-motion -
react-anime
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React! -
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) -
React Native Circle Menu
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion -
react-motion-ui-pack
Wrapper component around React Motion for easier UI transitions. -
data-driven-motion
Easily animate your data in react -
gooey-react
The gooey effect for React, used for shape blobbing / metaballs (0.5 KB) 🧽 -
react-spark-scroll
Scroll-based actions and animations for react -
react-mt-svg-lines
A React.js wrapper component to animate the line stroke in SVGs -
react-atv-img
A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React. -
react-track
Track the position of DOM elements. Create cool animations. -
react-web-animation
React components for the Web Animations API - http://react-web-animation.surge.sh -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers -
react-tween
DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead! -
react-parallax-component
Easiest way to add scroll parallax effect on the component -
react-ts-typewriter
Easy to use typewriter component written with Typescript and React 18+ in mind -
auto-size-transition
A component that scale dynamically according to the internal size -
react-animatable
A powerful composable animation library for React, built on Web Animations API and React hook. -
react-scroll-rotate
Very simple react component for rotate element based on scroll position -
anim-react
simple js react animation, animation hook, web Animation interface, onclick animation, onview,onsight animation, without css animation, no transition animation, js animation class usage. -
react-tsparticles
A lightweight component to easily create interactive particles animations
Appwrite - The Open Source Firebase alternative introduces iOS support
Do you think we are missing an alternative of react-gsap-enhancer or a related project?
README
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:
- From v0.2 react-gsap-enhancer requires react v0.14+. Check out this release notes for upgrading from v0.1.x.
- GSAP v1.18+ (NPM, CDN)
Demos
- Playground
- CodePen
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}
)
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 matchtarget.findAll(selector)
: returns with all the matchestarget.findInChildren(selector)
: returns with the first match in the direct childrentarget.findAllInChildren(selector)
: returns with all the matches in the direct childrenjavascript 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!