KUTE.js

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:

• We need an <input type="range" min="0" max="1" step="0.00001" /> with these exact min, max and step attributes
• Now we need a tween object, let's just do a svg morph for instance, but make sure you use KUTE.fromTo() method, the others don't prepare start values for the tween object
• We also need to make sure nothing controls the progress except the range input, so don't use start() or pause() methods at all, as well as repeat and / or yoyo options
• Next we attach an input event handler to update the tween progress by using the KUTE.update function, which is the step function triggered on every requestAnimationFrame tick

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:

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.

• Share