Skip to content

Commit

Permalink
fix typos in readme
Browse files Browse the repository at this point in the history
  • Loading branch information
azazdeaz committed Oct 25, 2015
1 parent 07e8ad6 commit 3c05aad
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ A [React] component enhancer for applying [GSAP] animations on components withou
- [Material Login Dialog](http://codepen.io/azazdeaz/pen/yYavVK?editors=001)

###Why?
We have great tools (like [react-motion], or [Animated]) to animate the state and props of out React component 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.
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.
- 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}```)
Expand Down

0 comments on commit 3c05aad

Please sign in to comment.