Animate content with JavaScript and native web technologies. Explore how to configure and animate DOM elements, animate within the HTML5 canvas, and use the Web Animations API.
Overview
Syllabus
Introduction
- Welcome
- What you should know
- Using exercise files
- Alternative options for animation
- Choosing a development environment
- Creating an HTML document
- Styling the document with CSS
- Writing JavaScript
- Testing in the browser
- Configuring DOM elements
- Visual change over time
- Ending an animation
- Making use of requestAnimationFrame
- Interactive animation
- ✓ Challenge: Additional properties
- ✓ Solution: Additional properties
- Configuring a canvas element
- Drawing within the canvas context
- Animating within the canvas
- Adding acceleration
- ✓ Challenge: Adding effects
- ✓ Solution: Adding effects
- Configuring our web elements
- Basics of the animate method
- Using additional keyframe properties
- Apply easing to the animation
- Controlling animation playback
- Goodbye
Taught by
Joseph Labrecque