From the course: Vanilla JavaScript: Animations
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Interactive animation - JavaScript Tutorial
From the course: Vanilla JavaScript: Animations
Interactive animation
- [Instructor] At the moment, our animation simply runs, whenever the browser view is initialized. Since we are using JavaScript, we can make the animation interactive instead, providing control to the user. Let's make some adjustments now to our JavaScript to enable this. The first thing I'm going to do, is provide an additional variable, so var isPlaying, and this is going to track whether the animation is playing or not. Initially, we'll set that to false, because when we start out, the animation won't be playing. Here's our circleAnimation, and what we're gonna do, is actually kind of tweak this quite a bit. We don't care about the timing anymore, so we just want the original location to increment, and we want to change the position of our circle. Additionally, we will need to requestAnimationFrame each time circleAnimation runs, in order for it to keep going. We're going to remove this else statement since that logic no longer exists, and we'll just comment out these last two…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.