Jon frança

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 3/365 of Framer Animations

Today I'll talk about easing: the transitions between states when changing movement, colors, variants, and more.

I included a video showing the differences between them, plus an old After Effects animation that demonstrates a Bézier curve. The match starts slow, speeds up in the middle, then slows down again. Once you learn to see that rhythm, you can recreate it anywhere.

Linear Constant speed from start to finish. Predictable and robotic. Best for infinite loops, progress bars, and loading screens.

Ease In Starts slow and accelerates. Adds weight, making it great for large elements leaving the screen, such as drawers and modals. Avoid it for entrances.

Ease Out Starts fast and slows down smoothly. Perfect for buttons, cards, and elements entering the screen. Usually not ideal for exits.

Ease In Out Starts slow, speeds up in the middle, and slows down at the end. Feels natural because it mimics human movement. My favorite for mobile navigation menus.

Spring You control duration and overshoot. Great for micro-interactions like toggles, checkmarks, and playful UI elements.

Spring Physics You don't control duration, only the physics: • Stiffness = spring tension • Damping = bounce resistance • Mass = weight/inertia

Perfect for drag-and-drop, swipes, and gesture-based interactions.

Back In Moves backward before moving forward. Creates anticipation, like someone crouching before a jump. Great for exits.

Back Out Overshoots the destination before settling. Feels elastic, organic, and lively.

Back In Out Combines anticipation and overshoot. Used carefully on icons and UI elements, it adds personality and helps your brand stand out.

The "Back" transitions are some of the easiest ways to make motion feel unique rather than generic.

I wanted to explain it in more detail, but I've run out of space in this post. So if you still have any questions, feel free to ask them in the comments!

Day 2/365 of Framer Animations

Today's topic is Hover Effects.

I know it's basic, and most of you already know it. But hover effects are incredibly versatile, and with a little creativity, you can create endless variations.

In this video, I show a few practical examples.

The first examples use hover effects on buttons to indicate that an element is clickable, which is very important for users to understand. They're also great for micro-interactions, like the four titles shown in the video. When you hover over them, the text turns black and a white background appears behind it.

That background is actually a text layer inside a stack, converted into a component with a fill color applied on hover. The stack lets me place the background behind the text while inverting the text color.

The lower example comes from a fashion agency template I designed myself (you can see the full website on my profile). Here, the button becomes a lighter gray when hovered. Once clicked, it changes into a different state called Pressed.

Hover = cursor over the element. Pressed = mouse button held down or clicked.

The final example is a card inspired by a Framer University tutorial. The original version flipped like a playing card with a 3D effect, but I removed those variants and kept only the hover interaction. I changed the color, added +2 gap (spacing between elements), and applied a subtle stroke around the image.

To create a component, right-click an element and select Create Component, or use Ctrl + Shift + K on Windows.

Then click the "+" button and add a Hover variant. Inside that state, modify whatever you want: colors, spacing, opacity, size, or additional information. Framer will automatically animate the transition between states.

Remix link: https://framer.link/oo0WpGy

I originally wrote about 1,400 more characters, but Framer has a message length limit. One day I'll probably create my own website so I can share the complete versions.

Day 1/365 of Framer Animations

To both improve my Framer skills and engage with the community while helping beginners create animated websites, I've decided to start this series where I share a new animation every day, along with the complete step-by-step process behind it.

Note: I'm not a master of Framer animations by any means, but I'll be constantly studying and sharing everything I learn with you along the way.

The first few days will focus on basic animations for complete beginners. As time goes on, more advanced animations will take their place, so be patient and follow me on this journey.

This first effect is the Appear Effect.

You can configure it according to the order shown in the screenshots. Generally, it's recommended to animate icons and components using a scale transition from smaller to larger. For text animations, opacity and offset are usually enough if you prefer.

Offset simply means defining the direction from which an element will enter the screen, such as left to right, top to bottom, bottom to top, and so on.

This effect is normally used to organize hierarchy. In other words, the most important element will often have a shorter delay before appearing, because that's where I want the visitor's attention to go first.

It can also be used simply to make a website more visually appealing. As web designers, showcasing our work through our own websites by using the animation techniques, colors, information structure, and design principles we know is part of what we do.

All of these elements come together to create a kind of harmony, where a website isn't beautiful just for the sake of being beautiful. Everything has a reason behind it.

And that's the level we should aim to reach.

A fashion agency template for those who work in this niche or want to develop their skills as a web designer!