## 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.