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! Let’s see!:

Here’s a 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.