Day 4/365: Framer Animations

Today you'll learn this super simple page transition shown in the video! I used a template I made so you can see the effect in a real project.

Step 1

Select your page and, in the right sidebar, go to the Desktop section. Click Effects, then select All Pages.

Step 2

In the Page Effect panel, open This Page.

Under Mask, change:

Type: Wipe

Angle: 270°

Step 3

Still under This Page, configure the Transition exactly as shown in the screenshot:

Duration: 0.6s

Easing: Use the same fast custom Bézier curve shown in the image.

Step 4

Before leaving This Page, set:

Offset Y: -30%

Step 5

Now switch to Any Page.

Here, the settings are almost identical, with one important difference:

Offset Y: 30% (positive)

The -30% value is only used in This Page. Using 30% in Any Page reverses the animation, creating a smooth top-to-bottom transition.

Step 6

For Any Page, also set:

Mask: Wipe

Angle: 270°

Then copy the same custom Bézier easing from This Page and paste it into the Transition settings for Any Page.

Finally, set the duration between 0.4s and 0.6s.

This entire tutorial takes less than five minutes, and the result looks surprisingly polished.

If anything was unclear, let me know in the comments! I tried to explain everything as simply as possible.

Thanks for reading, and see you tomorrow!

Day 4/365: Framer Animations

Today you'll learn this super simple page transition shown in the video! I used a template I made so you can see the effect in a real project.

Step 1

Select your page and, in the right sidebar, go to the Desktop section. Click Effects, then select All Pages.

Step 2

In the Page Effect panel, open This Page.

Under Mask, change:

Type: Wipe

Angle: 270°

Step 3

Still under This Page, configure the Transition exactly as shown in the screenshot:

Duration: 0.6s

Easing: Use the same fast custom Bézier curve shown in the image.

Step 4

Before leaving This Page, set:

Offset Y: -30%

Step 5

Now switch to Any Page.

Here, the settings are almost identical, with one important difference:

Offset Y: 30% (positive)

The -30% value is only used in This Page. Using 30% in Any Page reverses the animation, creating a smooth top-to-bottom transition.

Step 6

For Any Page, also set:

Mask: Wipe

Angle: 270°

Then copy the same custom Bézier easing from This Page and paste it into the Transition settings for Any Page.

Finally, set the duration between 0.4s and 0.6s.

This entire tutorial takes less than five minutes, and the result looks surprisingly polished.

If anything was unclear, let me know in the comments! I tried to explain everything as simply as possible.

Thanks for reading, and see you tomorrow!