Vanilla JavaScript: Animations
1h 2mIntermediate2018-06-26
Authors
Joseph Labrecque
University Professor, Adobe Educator, Studio Head
Course details
Explore strategies and techniques for animating content using JavaScript and native web technologies. In this focused course, instructor Joseph Labrecque demonstrates how to use vanilla JavaScript to perform common animations within modern web browsers. Joseph begins by covering basic web development concepts, including how to create an HTML document and style it with CSS. He then goes into JavaScript animation fundamentals, looking at how to configure Document Object Model (DOM) elements—the foundational tag structure of HTML—and how to animate these elements across the viewport. He also looks at the HTML5 canvas element and how to perform complex animations within this single, powerful drawing surface. Finally, he looks at the future of JavaScript animation through the Web Animations API, which provides a common language for browsers and developers to describe animations and interact with playback.
Learning objectives
Configuring Document Object Model (DOM) elements
Starting and ending an animation
Making an animation interactive
Animating within canvas
Drawing within the canvas context
Working with the Web Animations API
Learning objectives
Configuring Document Object Model (DOM) elements
Starting and ending an animation
Making an animation interactive
Animating within canvas
Drawing within the canvas context
Working with the Web Animations API
Skills covered
JavaScriptOracleProgramming LanguagesSoftware DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Welcome
- 02 - What you should know
- 03 - Using exercise files
1. Web Development Fundamentals
- 04 - Alternative options for animation
- 05 - Choosing a development environment
- 06 - Creating an HTML document
- 07 - Styling the document with CSS
- 08 - Writing JavaScript
- 09 - Testing in the browser
2. JavaScript Animation Foundations
- 10 - Configuring DOM elements
- 11 - Visual change over time
- 12 - Ending an animation
- 13 - Making use of requestAnimationFrame
- 14 - Interactive animation
- 15 - ✓ Challenge - Additional properties
- 16 - ✓ Solution - Additional properties
3. Animating within Canvas
- 17 - Configuring a canvas element
- 18 - Drawing within the canvas context
- 19 - Animating within the canvas
- 20 - Adding acceleration
- 21 - ✓ Challenge - Adding effects
- 22 - ✓ Solution - Adding effects
4. Web Animations API
- 23 - Configuring our web elements
- 24 - Basics of the animate method
- 25 - Using additional keyframe properties
- 26 - Apply easing to the animation
- 27 - Controlling animation playback
Conclusion
- 28 - Goodbye
Related courses
- Learning App Building with Vanilla JavaScript
- Vanilla JavaScript: Mobile Game Programming
- Vanilla JavaScript: Building on the Document Object Model (DOM)
- JavaScript: Web Workers
- Vanilla JavaScript: Web Performance Optimization APIs
- JavaScript: Progressive Web Applications
- JavaScript: Service Workers
- JavaScript: Ajax and Fetch (2019)