Vanilla JavaScript: Animations

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.

Introduction

• Welcome
• What you should know
• Using exercise files

1. Web Development Fundamentals

• Alternative options for animation
• Choosing a development environment
• Creating an HTML document
• Styling the document with CSS
• Writing JavaScript
• Testing in the browser

2. JavaScript Animation Foundations

• Configuring DOM elements
• Visual change over time
• Ending an animation
• Making use of requestAnimationFrame
• Interactive animation
• ✓ Challenge: Additional properties
• ✓ Solution: Additional properties

3. Animating within Canvas

• Configuring a canvas element
• Drawing within the canvas context
• Animating within the canvas
• Adding acceleration
• ✓ Challenge: Adding effects
• ✓ Solution: Adding effects

4. Web Animations API

• Configuring our web elements
• Basics of the animate method
• Using additional keyframe properties
• Apply easing to the animation
• Controlling animation playback

Conclusion

• Goodbye