Interactive Animations with CSS and JavaScript

1h 41mIntermediate2018-09-04

Authors

W. Scott Means

Software Developer, Consultant, Author

Course details

In a world without Flash, mixed-mode animation is a powerful tool for web designers. This course shows how to choose the correct mix of HTML, JavaScript, CSS, and other assets to deliver polished web-based animations that look great on everything from flat-screen televisions to smartphones. Instructor W. Scott Means focuses on how CSS animations, JavaScript, and SVG can be used to produce sophisticated effects while keeping code complexity to a minimum. As he steps through how to build a dynamic presentation, he covers storyboarding, HTML5 custom elements, working with SVG, DOM manipulation, and more.

Learning objectives
Storyboarding
Creating a dynamic layout with flexbox
Interactivity with JavaScript
Navigating the DOM
Adding animation
Controlling animations with classes
Manipulating SVG with JavaScript
Applying CSS to SVG

Skills covered

CSSWeb Standards3D AnimationJavaScriptWeb DesignOracleFront-End Web DevelopmentVisualization and Real-TimeAnimation and IllustrationWeb DevelopmentProgramming LanguagesOpen SourceSoftware DevelopmentOne-Off

Concepts

0. Introduction

01 - Beyond Flash - Creating animations for the modern web
02 - What you should know

1. Building a Foundation

03 - Storyboarding
04 - Scene elements
05 - Animation strategies
06 - Set up your environment

2. HTML Layout

07 - HTML custom elements
08 - Responsive CSS with view units
09 - Create a square with CSS vmin
10 - Center element with CSS margins
11 - Center element CSS flexbox
12 - Create a dynamic layout with flexbox

3. Interactivity with JavaScript

13 - CSS selector specificity
14 - Add a JavaScript event handler
15 - Navigating the DOM

4. Adding Animation

16 - Animation setup
17 - CSS @keyframes
18 - Easing
19 - Auto-advance with JavaScript
20 - Control animations with classes
21 - Animate visibility
22 - We need a montage
23 - Adding an animationend event handler
24 - Animating with CSS transitions
25 - Targeted animations using IDs
26 - Manipulating DOM with JavaScript
27 - Randomize slide displays
28 - Set timing for transitions

5. Working with SVG

29 - The DOM is everything
30 - Manipulating SVG with JavaScript
31 - Applying CSS to SVG
32 - Fit and finish

6. Conclusion

33 - Next steps