Update to version 1.1.0

README.md

@@ -30,7 +30,7 @@ When using a module bundler you can import the transition function and optionall
 ```javascript
 import { transition, easeInOut } from 'plain-transition';
 
-transition({
+const myTransition = transition({
     easing: easeInOut,
     // ...options
 });
@@ -39,7 +39,7 @@ transition({
 When using the `plain-transition.min.js` bundle, all functions get bundled in the global `plainTransition` object:
 
 ```javascript
-plainTransition.transition({
+var myTransition = plainTransition.transition({
     easing: plainTransition.easeInOut,
     // ...options
 });
@@ -53,6 +53,7 @@ transition({
     to: 100,
     duration: 1000,
     easing: easeIn,
+    autostart: true,
     onChange: value => {
 
     },
@@ -80,12 +81,23 @@ Built-in functions:
 * easeOut
 * easeInOut
 
+**`autostart`** boolean *(default: true)*  
+Wheather this transition should start immediately or when transition.start() gets called.
+
 **`onChange`** function  
 This function gets called everytime the value updates. The first argument will be the current value.
 
 **`onDone`** function  
 This function gets called once, when the transition is finished and in its final value.
 
+## API
+
+**`myTransition.start()`**  
+This starts the transition. This is only relevant when `autostart: false` is set in the options.
+
+**`myTransition.cancel()`**  
+This stops the transition immediately. once it's canceled, it can't be started again.
+
 ## Browser support
 
 | Chrome | Safari | IE / Edge | Firefox | Opera |

dist/transition.es.js

@@ -10,11 +10,30 @@ function easeInOut(t) {
     return -Math.cos(t * Math.PI) * 0.5 + 0.5;
 }
 
+var transitions = [];
+
+function animate(time) {
+    transitions.forEach(function (t, i) {
+        t._frame(time);
+    });
+
+    requestAnimationFrame(animate);
+}
+
+requestAnimationFrame(animate);
+
 function transition(_options) {
+    var _this = this;
+
+    if (!(this instanceof transition)) {
+        return new transition(_options);
+    }
+
     var options = {
         from: 0,
         to: 100,
         duration: 1000,
+        autostart: true,
         easing: function easing(v) {
             return v;
         },
@@ -27,8 +46,23 @@ function transition(_options) {
     }
 
     var start = 0;
+    var started = options.autostart;
 
-    var frame = function frame(time) {
+    // Gets called at the end of the transition or manually by the user
+    this.cancel = function () {
+        // remove this transition from queue
+        transitions.splice(transitions.indexOf(this), 1);
+    };
+
+    this.start = function () {
+        started = true;
+    };
+
+    this._frame = function (time) {
+        // Don't do anything until this transition has started
+        if (started !== true) {
+            return;
+        }
 
         // Set the inital timestamp
         if (start <= 0) {
@@ -42,19 +76,19 @@ function transition(_options) {
         if (progress < options.duration) {
             // Call the onChange event
             options.onChange(options.easing(Math.min(progress / options.duration, 1)) * (options.to - options.from) + options.from);
-
-            requestAnimationFrame(frame);
         } else {
             // Call the onChange the last time and ensure the last value emitted is the final value
             options.onChange(options.to);
 
             // Call the onDone event to finish this off
             options.onDone();
+
+            // Ensure nothing happens anymore
+            _this.cancel();
         }
     };
 
-    // Start the transition
-    requestAnimationFrame(frame);
+    transitions.push(this);
 }
 
 export { transition, easeIn, easeOut, easeInOut };