Tween Progress Control

The handy tool to manually update a tween via an Input slider.

Overview

Create a tween object and link it to a range slider Input. Some stuff happening.

The Progress Bar can be a handy tool that enables you to manually update your tween animation, just in case there is a little detail you want to make it right.

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:

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

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

// initialize a progressBar for your tween
var progressBar = new KUTE.ProgressBar(rangeSlider,morphTween)

// also start animation when Element is clicked
document.getElementById('rectangle').addEventListener('click',function(){
  !morphTween.playing && morphTween.start()
})

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.

Note that this tool is not included in the official distribution file.