History

• The Animated GIF
• Flash
• JavaScript
• jQuery
• Other JS Libraries
• CSS3/JavaScript

Design Tools

• https://www.google.com/webdesigner/
• https://www.animatron.com/
• https://creative.adobe.com/products/animate

The Best Way?

CSS & JavaScript

CSS Transitions

#some-button{
    width: 100px;
    height: 80px;

    transition: width 1s;

}

#some-button:hover{
    width: 120px;
}

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

CSS Animations

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

h1 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

h1 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  0% {
    margin-left: 100%;
    width: 300%; 
  }

  100% {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript Animations

setTimeout() - NO!

function animate() {
    
    // Animation code goes e
    if(keepAnimating){
        setTimeout(animate, 100); //100 ms
    }
    else{
        //You're done!
    }
}
animate();

requestAnimationFrame

function animate() {
    
    // Animation code goes e
    if(keepAnimating){
        requestAnimationFrame(animate);
    }
    else{
        //You're done!
    }
}
animate();

Greensock

https://greensock.com

The Cheat Sheet

https://ihatetomatoes.net/greensock-cheat-sheet/