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 page content automatically

Animating page content automatically - Figma Tutorial

From the course: Figma: Building Animations and Interactions

Start my 1-month free trial Buy for my team

Animating page content automatically

“

Within the Figma design prototype, whenever we switch page views, there's a simple content block animation that occurs across both position and opacity. This is not yet present within our native web project, so that's how it should look. And if we switch to the web browser, it simply jumps to that content. There's no real animation that happens. We'll have to use a bit more advanced form of CSS animation through transitions, keyframe definitions, and a bit of JavaScript to accomplish this. Back in our code editor, make sure to choose your CSS file and locate the content block definition. Here it is. And what we want to do is initially set this opacity to zero. That's going to make everything within the content block completely invisible. If we go back to our browser, we can see that this is absolutely true. Back in our code editor, scroll down until you find the placeholder for our content animation. Here, we'll define a set of keyframes and some animation rules to go along with them.…

Contents