clarity-animation - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

package.json

 {
   "name": "clarity-animation",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Unopinionated animation library.",
@@ -5,0 +5,0 @@ "main": "./dist/main.js",

README.md

@@ -18,6 +18,4 @@ Getting Started with Clarity Animation
 ```
+Add a index.html file to the directory so it looks something like this.
 
-After running the npm command, downloading [requirejs](http://requirejs.org/docs/download.html)
-, and adding a index.html file, the folder structure would look something like this.
-
     * index.html
@@ -178,3 +176,153 @@ * node_modules
 
+## Animation Configurations
+```json
+    {
+        "target": {
+            x: 0,
+            y: 0
+        },
+        "properties":{
+            x: {
+                from: 0,
+                to: 100
+            },
+            y: {
+                from: 0,
+                to: 100
+            }
+        },
+        "duration": 1000,
+        "easing": "easeOutExpo"
+    }
+```
 
+## ElementAnimation Configurations
+```json
+    {
+        "target": div,
+        "properties":{
+           backgroundColor: {
+               from: "rgba(255,255,0,1)",
+               to: "#ff0000"
+           }
+        },
+        "duration": 1000,
+        "easing": "easeOutExpo"
+    }
+```
 
+Methods on Animations and Timelines.
+===
+## observe(type: string, callback )
+Observable Events
+* start
+* end
+* tick
+* play
+* reverse
+* stop
+* pause
+* restart
+
+
+```js
+...
+animation.observe("tick", function(){
+    console.log("tick");    
+});
+...
+
+```
+
+```
+
+## play( )
+Plays the animation from its current position to the end.
+```js
+...
+animation.play();
+...
+
+```
+
+## pause( )
+Pauses the animation.
+```js
+...
+animation.pause();
+...
+
+```
+
+## restart( )
+Restarts the animation from the beginning.
+```js
+...
+animation.restart();
+...
+
+
+## playToEndAsync( ):Promise
+Plays the animation from its current position to the end, and returns a Promise. When the animation makes it to the end of the animation, the promise is resolved. If any other actions are taken on the animation the promise will not be fulfilled.
+```js
+...
+animation.playToEndAsync();
+...
+
+```
+
+## reverse( )
+Sends the animation in reverse from its current position to the beginning.
+```js
+...
+animation.reverse();
+...
+
+```
+
+## reverseToEndAsync( ):Promise
+Sends the animation in reverse from its current position to the beginning. When the animation makes it to the beginning of the animation, the promise is resolved. If any other actions are taken on the animation the promise will not be fulfilled.
+```js
+...
+animation.reverseToEndAsync();
+...
+
+```
+
+## seek( percentage: number )
+If you seek when the animation is stopped, it will not render. Use pause then seek instead. 
+```js
+animation.pause().seek(0.3);
+```
+Or use 
+```js
+animation.seek(0.3).render();
+```
+Use stop and seek if you don't want the viewer to know that animation is positioned to some 
+other time then what is rendered.
+```js
+...
+// Seek to this percentage of the animation.
+animation.seek(0.5);
+...
+
+```
+
+## setTimeScale( percentage: number )
+```js
+...
+// Go twice as fast
+animation.setTimeScale(2);
+...
+
+```
+
+## getTimeScale()
+```js
+...
+var scale = animation.getTimeScale();
+...
+
+```
+
+

No alert changes

Improved metrics

Total package byte prevSize

517309

increased by1.29%

Number of package files

49

increased by2.08%

Number of lines in readme file

327

increased by82.68%

No dependency changes