From 3c05aad0b8cc156bf9664d74913bfdd0f5edc14d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Polg=C3=A1r=20Andr=C3=A1s?= Date: Sun, 25 Oct 2015 22:56:45 +0100 Subject: [PATCH] fix typos in readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1494070..084dbbe 100644 --- a/README.md +++ b/README.md @@ -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}```)