Progress function for animation effects from first principles

This video shows how we can create animation effects from first principles.

If you know these three concepts:

• I can use CSS to style and position elements?

• I can run timed code using setTimeout and setInterval.

• I can change CSS properties of DOM elements with Javascript.

Put those three fundamental concepts together and you can do anything! We can see this in action in this half hour video of me showing the marketing team how to apply these ideas:

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!

Want to animate a bouncing square around the page? You can do it.

Want to have a fade in and out of a quote? You can do it!

If you can imagine it, you can program it.

Notice that there is symmetry with CSS transitions.