Tween Progress Control

KUTE.js object exposes all required methods in order for it to work, so why not try to do something fun? How about control tween progress? So let's make a quick tool:

A very basic code sample will look like this:

// basic morph, only fromTo and allFromTo should work
var morphTween = KUTE.fromTo('#rectangle', { path: '#rectangle' }, { path: '#star' }, { morphIndex: 127 });

// the range slider
var rangeSlider = document.querySelector('input[type="range"');

// do the dew
rangeSlider.addEventListener('input',function(){
    var tick = 0.00001; // we need a value that's slightly above 0, math is hard in JavaScript
    KUTE.update.call(morphTween, this.value * morphTween.options.duration + tick);
})

And now let's see the code in action:

0%

We might argue that we want to use other methods in combination with this method, or use this method while animations are running, but there are other libraries out there that can do that already. This example here is just to showcase KUTE.js can do this too.