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 setup

Animation setup

From the course: Interactive Animations with CSS and JavaScript

Start my 1-month free trial

Animation setup

“

- [Instructor] Now that we have a mechanism in place for going from one slide to the next, let's go ahead and start working on our animation. I want to animate the difference between this first slide and the second slide, where the circle gets larger and everything else gets smaller. So the way we're gonna do that is we're gonna come back into our code and go back to our page. Now, the way I'm going to style this, once again, the HTML is kind of the bones of things, so I'm gonna signal through the use of classes that the chooser is now in the chosen state, and now, this is kinda semantic, but this is the same way I would design this app if it was an actual active component. So I'm gonna say now the chooser is in the chosen state using a class, and I'm gonna select one of these images and I'm gonna add a class to it, as well, and I'll say it's chosen. Now, the reason I have to duplicate this, the reason I have a chosen class on the child and on the chooser, is because in CSS, to…

Contents