Web Animation

Noble Desktop

Navigate: Right/Left Arrows (or Swipe on Slide’s Content)
Zoom Out: Press Esc (or Pinch)
If keystrokes don’t work, click here & try again.

Today’s Agenda

  • Overview of Animation Techniques
  • Examples
  • Live Demos of Building Animations

Ways to Animate

  • Animated GIFs: Simple animations (work in emails)
  • CSS: Simple animations
  • JavaScript: Complex animations
  • Adobe After Effects: Complex animations for video & animated GIFs

Examples: Animated GIF

West Elm Email Animation
GIFs can be simple frame by frame style animations.
Launch Live Email Animation
GIFs can be complex. This was created with Adobe After Effects.
Be careful of large file size (this is 2.5MB) and limited colors (256 colors max).
First Frame of Launch Live Email
Outlook 2007 & newer display only display the first frame of a GIF.
Jack Spade Email Animation
Jack Spade (Source: Litmus)
Animated GIF with video - Clean Air
GIFs can even contain short videos!
Be careful of large file size (this is 2.2MB) and limited colors (256 colors max).

More Animated GIFs

Examples: CSS

Examples: JavaScript


The GreenSock Animation Platform (GSAP) is a JavaScript library focused solely on animation.

Examples: GSAP

After Effects

Can be used to make:

  • Video Ads for Web, TV, etc.
  • Videos for websites and YouTube
  • Complex Animated GIFs
  • and much more...

Examples: After Effects

Learn to create parts of this in our After Effects Level 2 Training


  • In real life, objects don’t start or stop instantly.
    Why should animations?
  • Animations with a single (linear) speed, don’t look as natural.
  • Easing changes the rate of speed during an animation.
  • Easing can make animations look more natural, or be used for many creative effects.

Easing Tools

Live Demo

  • Simple animated GIF in Photoshop
  • CSS animation
  • JavaScript animation with GreenSock (GSAP)
  • Complex animated GIF in After Effects & Photoshop
  • Reference Links:
    Nintendo Switch Website & CSS Animation
    Stripe Amex Express Checkout

Learn More

Photoshop Animated GIFs: Class or Book

HTML5 Animation with GreenSock: Class, Videos, or Book

Responsive CSS3 Scrolling Effects: Seminar or Book

Adobe After Effects: Classes or Books

Noble Desktop