Your browser doesn't support the features needed to view this presentation, so you are presented with a simplified version.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Animation
in the
BROWSER

Ben Korody 10/24/13

Context: History of Animation

Principles of Animation

Use these principles to help animations look life like and/or have real world properties.
Links: 12 basic principles & relevance for the user interface, Video

  1. Squash and stretch
  2. Anticipation
  3. Staging
  4. Straight ahead action & pose to pose
  5. Follow through and overlapping action
  6. Slow in and slow out
  7. Arcs
  8. Secondary action
  9. Timing
  10. Exaggeration
  11. Solid drawing
  12. Appeal

Browser Technologies

Flash what? Today native browser technologies are very capable of all sorts of animations.

Animatable Elements:

Elements that Animate:

Animation Approaches

An introduction with demos

CSS animations are intended to be GPU accelerated by the browser so that they are smooth.

Vendor prefixes (-webkit-, -moz-, -ms-, -o-) are still needed before many of these properties.

CSS Transitions


        div.transition-me {
            transition-duration: 1s;
            transition-property: width;
            position: absolute;
            width: 100px;
            background: #ccc;
        }
        div.transition-me:hover {
            width: 500px;
        }
                

        <div class="transition-me">&nbsp;</div>
 

Animation Approaches

CSS Animations


        .animate-me {
            animation-name: the-animation;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
          
            width: 100px;
            background: #ccc;
        }

        @keyframes the-animation {
            0%   { width:100px; }
            50%  { width:200px; }
            100% { width:500px; }
        }
                

        <div class="animate-me">&nbsp;</div>
 

Animation Approaches

CSS Transforms

Transforms are useful for creating rich animations using CSS3 transitions and animations.


    .transform-me {
        /* sample tranforms */
        transform: skew(-10deg) scale(1,1) rotate(-10deg) translate(10px, 0);
        
        /* change origin - defaults to center */
        transform-origin: bottom left;
        
        /* transition a transform */
        transition-property: transform;
    }
    
    .transform-me:hover {
        transform: skew(-45deg) scale(5,5) rotate(-45deg) translate(5px, 0px);
    }

        <div class="transform-me">&nbsp;</div>
 

Animation Approaches

Javascript: Vanilla Animate (don't do this)


        function animate(elem) {
            var width = 0;
            function frame() {
                width++;
                elem.style.width = width + 'px';
                width == 300 ? clearInterval(id) :'';
            }
            var id = setInterval(frame, 16);
        }

Javascript: jQuery Animate


        $('.js-animate-me').click(function(e) {
            $('.js-animate-me').animate({width:"300px"}, 1000, 'easeOutBack');
        });

Animation Approaches

Javascript: Animation & Tweeing Libraries

Animation Approaches

Javascript: Frame Animation

Don't use setTimeout or setInterval – use requestAnimationFrame!


        window.requestAnimFrame = (function() {
            return  window.requestAnimationFrame   ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                function( callback ) { 
                    window.setTimeout(callback, 1000 / 60); 
                };
            }
        )();
        
        (function animloop(){
          requestAnimFrame(animloop);
          render();
        })();

Static vs. Dynamic Animation

Dynamic Animation

There is more than one way of creating dynamic animations but lets take a closer look at one.

Physics Animation

Types of physics animation

Core concepts of physics animation

Dynamic Animation

Demo Time: JS Physics Animation

These are learning examples. Production examples would use requestAnimationFrame, enabling GPU accelleration and other important optimizations. These concepts, and more, are the foundation for creative use.

More resources

Trends & examples

Thanks, keep on Animating!

-Bk

Use a spacebar or arrow keys to navigate