From the course: Figma: Building Animations and Interactions
Join today to access over 24,500 courses taught by industry experts.
Animating the button - Figma Tutorial
From the course: Figma: Building Animations and Interactions
Animating the button
Our water page experience is more complicated than the other pages because we have some additional interactive animations within it. If we look to our Figma prototype and we go to the water page, we can see that clicking upon the Nutritional Information button swaps out the photograph of the girl drinking water with the nutrition label. It also causes the lead copy text to animate in along with the exit animation for the button itself. Let's start with the animation for the button. Inside of our code editor, choose the water HTML file and scroll down once again to the script block where we created the content animation previously. I'm going to add a couple of lines of empty code here. And after doing that, what I need to do is identify the nutrition button itself. Now, if we look up here, we can see that the button ID is SportBtn. This is what we're going to use to identify it, very similar to what we did up here. I'm going to say let Nutrition button equal document querySelector. 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.
