From the course: Vanilla JavaScript: Animations
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
✓ Solution: Additional properties - JavaScript Tutorial
From the course: Vanilla JavaScript: Animations
✓ Solution: Additional properties
- Here's how I solved the challenge of changing additional properties of our circle alongside its position. So, the first thing I did, because we were using document.getElement ID circle so many times, I initially declared a new variable called el for element, and set it equal to our reference to our circle. This is going to make things a lot easier to read. I then go ahead a variable named sc. This stands for scale, and it's initially set to 1. I then change my circle animation function to not only increment my object location, but also my scale by one each time it runs. Now, whenever you see el here, of course, this is referring to our circle element. So, I'm changing the style.left equal to its location in pixels. So, this is exactly the same as we've been doing. This is going to make the circle move across the actual V port. But then, I'm also changing its width and height together based on the scale property, and that's also in pixels. Because divs are basically rectangles, and…
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.