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 - Figma Tutorial
From the course: Figma: Building Animations and Interactions
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…
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.