Web Animation with CSS and JavaScript (H160)

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.

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

Outline

Week 1: Animation Basics

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

Week 2: CSS Transitions and Transformation

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

Week 3: Animation in Action

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

Week 4: JavaScript Animation Libraries

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

Prerequisites

A very solid understanding of the HTML, CSS and JavaScript is required for this class.

Requirements

You will a web host to post assignments and a current web browser.

Books:

No book is required for this class.

Additional information:

Your place in the course is confirmed by your payment. Introductory courses are intended for students with no experience in the subject matter and are seeking beginner level training.

Refund Policy: Please read our Terms and Refund Policy before registering for this course.

Additional Cost: Book and software might be required for the course. Read the Requirements and Book section for more information. Course fee does not include the book and software cost .

How eClasses Work:Instructors post lectures (text-based, no video or audio), reading selections, and hands-on assignments once a week in the online classroom. Students can discuss the assignments with the instructor and amongst themselves in the classroom area. This format has no set meeting time, which allows students to attend class at a time most convenient to them, yet still provides logically organized communication between class participants. Students can apply for the completion certificate after finishing the class.

Price:

$180.00

Item No.:

H160

Instructor:

Frank Stepanski

Open Courses: No other sessions are scheduled for this course. You can add to your wish list and you will be notified when other sessions are scheduled.

Instructor's Profile

Frank Stepanski has over 10 years experience in the IT field as a Web Developer. Frank has worked with technologies such as PHP, MySQL, ASP.NET, SQL Server as well as HTML, CSS and JavaScript. He has a Masters Degree in Software Engineering from Penn State University. He also teaches web programming classes at local universities.

Before you register for this class, please read the Outline, Prerequisites, Requirements, Books, and Refund Policy sections carefully.

Testimonials

No testimonial available!