The post-Flash era of web animation now consists of HTML5 web banners, CSS Animations and Transitions and JavaScript libraries such as jQuery and GASP (GreenSock) and others.

Where does Animation fit in web design today?

Animation reinforces hierarchy, relationships, structure, and cause and effect. Animation helps humans understand what’s happening on screen. It won’t make your site functional or more reliable, but it can contribute to making your site more interesting, usable and proficient in getting the goals of your site across to your visitors.

Animation can show, instead of tell. Subtle movements can offer feedback that lets visitors know when they’ve done something correctly and when they haven’t. It’s attention-getting, visual cue that leads users through a design and indicates where they can go next to learn more.

This class will focus on all three types of animation (static, stateful and dynamic) as well as talk about motion design theory, then get into the code of how to implement it on the web using either CSS or JavaScript.

Objectives for this class are:
• Understand the benefits of animation in your web design
• Understand the three different types of animation (static, stateful and dynamic)
• Overview of the Web Animation API spec
• Know what and how to use Polyfills for browser support
• Learn CSS Transforms
  • translate, scale, rotate and skew
  • Nested transforms
• Learn CSS Transitions
  • duration, timing, easing, delay,
  • Transition Events
• CSS Animations with keyframes
• How to create realistic animation using Disney’s 12 Principles of Animation
• How to use CSS framework Animate.css
• How to create scroller-based animations with JavaScript libraries Wow.js and Skroller.js
• Using the popular JavaScript library GASP: TweenLite, TweenMax and TimelineLite
• Creating simple HTML5 Web banners.
• Knowing about other various animation tools.

Applicable Job Roles: web designers, webmasters, web programmers, and web application developers, and any IT related job

• History of Animation
• Animation on the web: CSS and JavaScript
• Types of Animation: (static, stateful and dynamic)
• Disney’s 12 Principals of Animation
• Testing out CSS Transition and Animation property

• Online tools to test out CSS: CodePen
• Transitions and Animations properties
• Timing functions
• Multiple transitions

• Using keyframes
• Animation properties
• Multiple animations
• Animated storytelling
• Using Animate.css

• Differences between CSS and JavaScript animation
• Performance issues
• Page Scrolling animation libraries: Wow.js and Skrollr.js
• Motion Design Theory
• Physics-based motion: GASP – TweenLite and TweenMax