From the course: Figma: Building Animations and Interactions

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Animating the information text

Animating the information text

The last thing we need to animate to complete the entire interactive animated button press sequence is to have the lead copy text animate in alongside the nutrition label. If we look at it in Figma, once we click on our button, that text is revealed alongside of the image swap and the button going away. Back inside of Visual Studio Code, you should have a pretty good idea of how to go about this, because it's a lot of the same stuff that we're doing here. Since we're going to reveal the lead, let's go up and borrow once again from our content animation. We'll use a command or control C to copy this selection and then go down into our lead animation placeholder and do a command or control V to paste. Now instead of contentReveal, we're going to rename this to leadReveal for our lead text copy. And, of course, instead of content-animate for our class, lead-animate. And then for the animation name inside of here, we're, of course, going to do leadReveal. Just like with everything else…

Contents