From the course: Interactive Animations with CSS and JavaScript

Unlock the full course today

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

Animation strategies

Animation strategies

From the course: Interactive Animations with CSS and JavaScript

Start my 1-month free trial

Animation strategies

- [Instructor] Now let's step through our presentation slide by slide and discuss strategies for creating the desired effects. The first slide asks a question, so we'll wait for the user to answer it by clicking. While we expect the user to click on the circle, it doesn't really matter. Once they click anywhere we'll advance to the next slide using JavaScript. To illustrate what the correct answer was, we'll emphasize the circle by growing it and shrinking all the other shapes. We'll also fade the incorrect answers and we'll use CSS animations to do all this. The next slide we'll transition between the chooser component and the learner component. The chooser was where we were giving the user the illusion of being about to pick one of our options and the leaner component is gonna illustrate how deep learning functions by creating a learning montage. We'll use JavaScript to automatically advance to the next slide and CSS animations to move our circle from its original position to the…

Contents