Progress function for animation effects from first principles

What problem are we solving?

We need a solution that allows use to change various CSS properties over a time sequence so that we can create various animations effects such as:

• Hiding an element by making it become transparent.

• Moving an element by altering its position on the page.

• Increasing the width or size of the element.

We can make simple little functions which can do all these things.

But how do call that function over a period of time with a sequence of percentage values from 0 → 100?

We can create a utility function which can do this for us!

1. Over a period of time we specify.

2. Call a function we give it with a number representing the percentage 0 to 100.

3. When we are done call another function.

What should the interface for this function look like?

This would be a nice interface:

PROGtransition({
   action : function(N)  { console.log(N);      }, 
   time   : 1000, 
   end    : function()   { console.log("Done"); } 
});

What would the function implementation source code be?

function PROGtransition(T){
   if (!T.action) { return; }   // No action supplied
   var Time = T.time || 1000;   // 1000 is our default.
   var Percent = 101;
   var TimerId = setInterval(function(){
      Percent--;
      T.action(Percent);
      if (Percent == 0){
         clearTimeout(TimerId);
         if (T.end){
            T.end();
         }
      }
   }, Time / 100);
}

Let's try it out interactively using the Javascript console!