From the course: Learning Anime.js

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Solution: Animate a div and include user controls

Solution: Animate a div and include user controls - JavaScript Tutorial

From the course: Learning Anime.js

Start my 1-month free trial

Solution: Animate a div and include user controls

(upbeat music) - [Instructor] I hope you challenge you're successful. I'm going to show you the steps I took to achieve the animation but let's look at the animation again. You might deal with things in a different way of a different order but your solution should contain similar steps. creating the controls, targeting the divs that you want to animate, setting the animation properties, transforming the animation along the X axis and changing the border radius color with and rotation. The first thing I usually like to deal with are the parts that will apply to all the different things being animated. So I'm first going to define the targets for the animation which are the three divs. I'm going to give each of them a square class and give them the colors. So the first one is blue, the next one's red and the third one is green and I'm going to give each of them a width of 100 pixels and a height of 100 pixels. So…

Contents