add a readme

siddharthkp · Jul 28, 2021 · 975c118 · 975c118
1 parent 6546de7
commit 975c118
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/packages/example/src/index.js b/packages/example/src/index.js
@@ -13,7 +13,7 @@ function App() {
           className="box"
           initial={{ x: 0, rotate: 0 }}
           animate={{ x: 400, rotate: 180 }}
-          transition={{ type: 'spring', stiffness: 50, delay: 2 }}
+          transition={{ type: 'spring', stiffness: 50 }}
         />
       </div>
     </>

diff --git a/packages/tracer-motion/README.md b/packages/tracer-motion/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="demo.gif" height="200px"/>
+  <img src="https://raw.githubusercontent.com/siddharthkp/tracer-motion/main/packages/tracer-motion/demo.gif" height="200px"/>
   <br><br>
   <b>Visual debugger for framer-motion</b>
   <br><br>
@@ -9,20 +9,43 @@
 
 &nbsp;
 
+[Demo on CodeSandbox](https://codesandbox.io/s/tracer-motion-x4570)
+
+&nbsp;
+
 #### install
 
 ```
-npm install tracer-motion
+npm install tracer-motion --save-dev
+
+# or
+
+yarn add tracer-motion --dev
 ```
 
 &nbsp;
 
 #### usage
 
-```js
-const repo = require('tracer-motion')
-
-// add how to use
+```diff
+import { motion } from 'framer-motion';
++ import { tracer } from 'tracer-motion';
+
+function App() {
+  return (
+    <>
+      <div>
+-       <motion.div
++       <tracer.div
+          className="box"
+          initial={{ x: 0, rotate: 0 }}
+          animate={{ x: 400, rotate: 180 }}
+          transition={{ type: 'spring', stiffness: 50 }}
+        />
+      </div>
+    </>
+  );
+}
 ```
 
 &nbsp;