Vanilla JavaScript: Animations

Focused View

Joseph Labrecque

1:01:51

150 View

01 - Introduction

01 - Welcome.mp4

00:53

02 - What you should know.mp4

00:26

03 - Using exercise files.mp4

00:35

02 - 1. Web Development Fundamentals

01 - Alternative options for animation.mp4

01:23

02 - Choosing a development environment.mp4

01:55

03 - Creating an HTML document.mp4

02:51

04 - Styling the document with CSS.mp4

02:22

05 - Writing JavaScript.mp4

03:54

06 - Testing in the browser.mp4

02:20

03 - 2. JavaScript Animation Foundations

01 - Configuring DOM elements.mp4

02:42

02 - Visual change over time.mp4

02:44

03 - Ending an animation.mp4

02:20

04 - Making use of requestAnimationFrame.mp4

03:52

05 - Interactive animation.mp4

04:34

06 - Challenge Additional properties.mp4

00:16

07 - Solution Additional properties.mp4

01:56

04 - 3. Animating within Canvas

01 - Configuring a canvas element.mp4

02:39

02 - Drawing within the canvas context.mp4

02:09

03 - Animating within the canvas.mp4

03:39

04 - Adding acceleration.mp4

02:28

05 - Challenge Adding effects.mp4

00:23

06 - Solution Adding effects.mp4

03:04

05 - 4. Web Animations API

01 - Configuring our web elements.mp4

02:01

02 - Basics of the animate method.mp4

03:00

03 - Using additional keyframe properties.mp4

02:47

04 - Apply easing to the animation.mp4

01:38

05 - Controlling animation playback.mp4

02:25

06 - Conclusion

01 - Goodbye.mp4

00:35

Description

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.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

Joseph Labrecque

Instructor's Courses

Joseph Labrecque is a creative developer, designer, and educator with nearly two decades of experience creating expressive web, desktop, and mobile solutions. He joined the University of Colorado Boulder College of Media, Communication and Information as faculty with the Department of Advertising, Public Relations and Media Design in Autumn 2019. His teaching focuses on creative software, digital workflows, user interaction, and design principles and concepts. Before joining the faculty at CU Boulder, he was associated with the University of Denver as adjunct faculty and as a senior interactive software engineer, user interface developer, and digital media designer. Labrecque has authored a number of books and video course publications on design and development technologies, tools, and concepts through publishers which include LinkedIn Learning (Lynda.com), Peachpit Press, and Adobe. He has spoken at large design and technology conferences such as Adobe MAX and for a variety of smaller creative communities. He is also the founder of Fractured Vision Media, LLC; a digital media production studio and distribution vehicle for a variety of creative works. Joseph is an Adobe Education Leader, Adobe Community Professional, and member of Adobe Partners by Design. He holds a bachelor’s degree in communication from Worcester State University and a master’s degree in digital media studies from the University of Denver.

Linkedin Learning

View courses Linkedin Learning

LinkedIn Learning is an American online learning provider. It provides video courses taught by industry experts in software, creative, and business skills. It is a subsidiary of LinkedIn. All the courses on LinkedIn fall into four categories: Business, Creative, Technology and Certifications. It was founded in 1995 by Lynda Weinman as Lynda.com before being acquired by LinkedIn in 2015. Microsoft acquired LinkedIn in December 2016.