From the course: Vanilla JavaScript: Animations
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Visual change over time - JavaScript Tutorial
From the course: Vanilla JavaScript: Animations
Visual change over time
- [Instructor] Animation, at its most basic, is a change in the visual properties of an object over time. To demonstrate how this can be done in JavaScript, we'll instruct the circle we just created to move across the browser viewport at a set interval. Inside app.js, go ahead and paste the content from the snippets file, and you'll see we declare a number of variables, and we have a function that executes across an interval. The first thing we have here is a variable, and we've named that variable "ol," and that just stands for original location. Initially, we set this to zero, because there's no change in its original location. We then set a variable named "circleInterval," and set that equal to setInterval, where we put in a function name to execute at every tick of this interval. That function name is "circleAnimation," and you can see that right below here. And then we specify how often to execute that across the interval. So this is 50 milliseconds, so it's going to execute…
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.