Tutorial: Create a smooth page transition animation in 2026
.avif)
.avif)
.avif)
.avif)
Figma is a wonderful animation tool. Like its competitor, Adobe XD, the software does not allow vector animation. However, this doesn't stop it from pushing the creative boundaries for many designers.
In this tutorial, I will explain how to create a smooth page transition animation from A to Z, step by step. You will learn how to use masks, as well as page-based animations.
I. HOW TO CREATE A SMOOTH PAGE TRANSITION ANIMATION
1. Setting up the workspace
The animation is divided into two pages. The first will be called "Design Service" and the second, "SEO Expertise".
Start by creating these two pages.
I use the Anton font for titles, with a size of 180, and Hind Siliguri with a size of 30 for text and 20 for the navigation bar. Titles should be placed on separate layers.
The 3D illustrations were created using Spline software.
This article will not cover the creation of these illustrations, but it could be the subject of a future article.
The vector elements were created with the pen tool. You are free to keep them or not.
Backgrounds should be created with a shape and should not be filled on the page. Your Figma page should then look like this.
Group your sub-texts with their graphic elements. Create a rectangle that completely covers this group, then send it to the bottom of the grouped layer.
Select your layer group and the rectangle, then, in the top center, select the round "Use as mask" icon or use the "Ctrl+Alt+M" command. Your group should now be masked by the rectangle.
2. Organizing the Elements
All elements have now been created. It's time to organize them into layers that will be useful for animation.
Start by grouping all the elements on a page, except for the navigation bar, and the title "Construisons".
Now group your two titles. Rename your layers logically for clarity.
You should now have four elements in this layer: the masked layer with the subtext inside, your two grouped titles, the illustrative element, and the page background.
Do this for your two pages
3. Creating the Ellipse
Now create an ellipse that covers all elements on a page and place this layer below the others. Just like with the subtexts, select all elements in the layer, then create the mask. You should then be able to achieve this effect when you reduce the size of your circle.
Select only the circle, then move it so that the center of the circle is also the center of the navigation bar logo, as shown below.
Do the same for the "SEO Expertise" page. This time, the circle on this page must touch the center of the "expertise" text.
Re-enlarge your circles, then duplicate your two pages side by side.
4. Creating the animation
It's important to note that any layer name changes must also be applied to the copy.
Copy one of the transition layers and reduce the size of its circle until it reaches 1 pt.
Cut the transition layer, then paste it onto the opposite page as explained below. The layers on both pages should normally look like this.
At this stage, the animation should already be working.
Copy the animation values as shown below for each page.
The animations for the two pages, top right and bottom left, have a simple instant delay.
This prevents the two animations from overlapping.
Re-stretch the circles that serve as masks for the two pages concerned. Now, move the elements to bring the animation to life.
Slightly move the titles and illustration, then tuck the subtext into its mask. The page should look like the one on the right.
Repeat the process for the other page, then close the circles.
The animation is now ready and complete!
You now have all the information needed to create a page transition animation with Figma.
See also our other articles
Let's discuss your needs
Are you looking for a web agency for your project? Contact us and find out how we can help you.