Web Animation

Download Demo Files & PDF Exercise

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

Valentine’s Day GIFs Dior’s GIF with video is 7MB
Spark Animated GIF with video is 6.3MB
Brief History of Web Design for Designers
Reborn Animated GIF ribbon is 261KB. Also use CSS & JS.
Spotify: Streaming Habits Scroll down to bubbles (3.9 MB)

Examples: CSS

Stripe: Atlas
Animated Login Screen Click into text fields.
FullStory Also uses JS for timing, etc.
Stripe: Amex Express Checkout Also uses JS.
Abstract Video for demo. CSS for party bird in footer.

Examples: JavaScript

GreenSock

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

Examples: GSAP

Hunger Games The Capitol
McDonald’s 100 Moments
Now You See Me 2
The Next Rembrandt
Bose
Web Designer Claudio Calautti
Firefox Loading Animation by Nerdmanship

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

Easing

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

GreenSock Ease Visualizer
Ceaser For CSS, including custom easing!
easings.net For CSS & JS

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