Overview
-
Learn how to choose the correct mix of HTML, JavaScript, CSS, and other assets to deliver polished web-based animations.
Syllabus
-
Introduction
- Beyond Flash: Creating animations for the modern web
- What you should know
- Storyboarding
- Scene elements
- Animation strategies
- Set up your environment
- HTML custom elements
- Responsive CSS with view units
- Create a square with CSS vmin
- Center element with CSS margins
- Center element CSS flexbox
- Create a dynamic layout with flexbox
- CSS selector specificity
- Add a JavaScript event handler
- Navigating the DOM
- Animation setup
- CSS @keyframes
- Easing
- Auto-advance with JavaScript
- Control animations with classes
- Animate visibility
- We need a montage
- Adding an animationend event handler
- Animating with CSS transitions
- Targeted animations using IDs
- Manipulating DOM with JavaScript
- Randomize slide displays
- Set timing for transitions
- The DOM is everything
- Manipulating SVG with JavaScript
- Applying CSS to SVG
- Fit and finish
- Next steps
