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.

Challenge: Animate a div and include user controls

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

From the course: Learning Anime.js

Start my 1-month free trial

Challenge: Animate a div and include user controls

[Peppy Music] - Now you have covered most of the staple concepts you need to animate and control a div. You are ready to take on this challenge. You'll start with a stack of three square divs. A blue div, a red div, and a green div, each 100 by 100 pixels. Your goal is to transform them into a stack of three fuchsia ovals, each 150 pixels wide and 100 pixels tall, 250 pixels away from the starting point. The total animation will take 2,000 milliseconds. The three square divs that you start with undergo the following animations. Translation along the X axis by 250 pixels. A 360-degree rotation after delay of 500 milliseconds. Halfway through, their color will change to fuchsia. That's the color hex code ff00ff. All the divs will morph from a square to a circle throughout to the 2,000 millisecond duration. After 1,500 milliseconds, the width of the divs will increase by 10 pixels. The animation will be staggered. The…

Contents