51:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:T7a4,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.53:T7a4,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.54:T7a4,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.55:T6bd,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.56:T6bd,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.57:T83a,

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!

58:T8f8,

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!

59:T925,

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.

5a:T74b,

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.

5b:T937,

Built for:

— Modelling agencies launching their digital presence

— Studios that need a high-end fashion frontend ready in a day

— Designers building client sites in the luxury or talent space

— Anyone who wants a template that looks like it costs more than it does

HOME

A cinematic editorial landing page designed to feel like a real luxury agency website.

Includes:

Full-bleed editorial hero section

Horizontal scrolling model roster

Latest Works gallery featuring 8 editorial covers

“Model of the Year” spotlight section

Animated agency timeline from foundation to present day

MODELS

A complete agency-style talent directory with 16 fully designed individual model pages.

Features:

Filterable by country: France, Italy, Spain, and Russia

Professional editorial-style biographies

Full model statistics including:

Height (cm + imperial)

Bust / Waist / Hips

Shoe size (EU + US)

Date of birth

Instagram profile link

Every profile was written to feel authentic to high-end fashion agencies.

NEWS

A fully structured editorial publishing system built directly into the template.

Includes:

10+ pre-made articles

6 editorial categories:

Campaign

Industry

Trends

Spotlight

Making-of

Editorial

Related posts section

GET SCOUTED

A premium scouting experience designed for real submissions.

Includes:

Advanced scouting form

Visual photo submission guidelines

7 structured form fields

Dropdown selectors for:

Country

Eye color

Hair color

Skin tone

Availability

Built to feel significantly more professional and complete than typical agency templates.

CONTACT

A clean contact experience for agencies, brands, and talent inquiries.

Includes:

Inquiry form

5-question FAQ accordion covering the most common agency topics

LEGAL

Essential legal pages already included.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-37dde9d1-e8de-44f2-bc46-ce9feda1c279-all:/unified/creator/37dde9d1-e8de-44f2-bc46-ce9feda1c279/activity/":[{"data":[{"id":"019f0a40-7462-7357-8464-50cabb11406f","type":"comment.created","target":{"type":"post","id":"019f0a27-8dd4-737d-afd5-759b4fd6588c","preview":"Excited to share that HausFlow is now ranked #1 in the Interior Design category on the @Framer Marketplace! Thank you for all the support. More to come! 🙌\nCheck it out:https://hy.chujiqiqi.com/@murad-hussain/?tab=marketplace","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Excited to share that "},{"type":"text","text":"HausFlow","marks":[{"type":"bold"}]},{"type":"text","text":" is now ranked "},{"type":"text","text":"#1","marks":[{"type":"bold"}]},{"type":"text","text":" in the Interior Design category on the "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" Marketplace! Thank you for all the support. More to come! "},{"type":"emoji","attrs":{"name":"raised_hands","emoji":"🙌"}}]},{"type":"paragraph","content":[{"type":"text","text":"Check it out:"},{"type":"text","text":"https://hy.chujiqiqi.com/@murad-hussain/?tab=marketplace","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://hy.chujiqiqi.com/@murad-hussain/?tab=marketplace","target":"_blank"}}]}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5c9d17c3-6c73-49b7-879e-42511f198183/rtgyciry","targetDeleted":false,"owned":false,"actions":{"postId":"019f0a27-8dd4-737d-afd5-759b4fd6588c","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019f0a40-7449-709f-ab18-cd1ab0c70a21","preview":"Congratulations!!!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Congratulations!!!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019f0a27-8dd4-737d-afd5-759b4fd6588c","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019f0a40-7449-709f-ab18-cd1ab0c70a21"},"repost":null}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-27T18:03:44.098Z","latestAt":"2026-06-27T18:03:44.098Z"},{"id":"019f003e-b297-767b-a9e2-f8669431d548","type":"comment.reply","target":{"type":"post","id":"019ed1bf-12c5-72cf-b57b-7b9c2058aad4","preview":"MODEL PARIS","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/21d4lh5e","targetDeleted":false,"owned":true,"actions":{"postId":"019ed1bf-12c5-72cf-b57b-7b9c2058aad4","like":{"count":14,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019f003e-b283-70ea-9a42-19c932157e46","preview":"my pleasure!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"my pleasure!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed1bf-12c5-72cf-b57b-7b9c2058aad4","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019f003e-361d-7048-95b5-9662150ce21c"},"repost":null}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-25T19:25:36.791Z","latestAt":"2026-06-25T19:25:36.791Z"},{"id":"019eff69-ba2a-7644-a1ef-699e63872c46","type":"creator.followed","target":{"type":"creator","id":"8f3ab624-224a-405f-bb7c-44c2296eecab","preview":"Basecom","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8f3ab624-224a-405f-bb7c-44c2296eecab/mb9o19ft","slug":"basecom","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-25T15:32:59.557Z","latestAt":"2026-06-25T15:32:59.557Z"},{"id":"019eff67-5e06-703d-ab66-104d87c57349","type":"comment.liked","target":{"type":"comment","id":"019efb20-5159-706a-99ff-b9b13a0819cb","preview":"Pretty cool!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Pretty cool!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019efb1d-a92f-7059-8b6e-ebd71ccf2075","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019efb20-5159-706a-99ff-b9b13a0819cb"},"repost":null}},"context":{"type":"post","id":"019efb1d-a92f-7059-8b6e-ebd71ccf2075","preview":"$52","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Day 2/365 of Framer Animations","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Today's topic is "},{"type":"text","text":"Hover Effects","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"In this video, I show a few practical examples."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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 "},{"type":"text","text":"Pressed","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Hover","marks":[{"type":"bold"}]},{"type":"text","text":" = cursor over the element. "},{"type":"text","text":"Pressed","marks":[{"type":"bold"}]},{"type":"text","text":" = mouse button held down or clicked."}]},{"type":"paragraph","content":[{"type":"text","text":"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 "},{"type":"text","text":"+2 gap","marks":[{"type":"bold"}]},{"type":"text","text":" (spacing between elements), and applied a subtle stroke around the image."}]},{"type":"paragraph","content":[{"type":"text","text":"To create a component, right-click an element and select "},{"type":"text","text":"Create Component","marks":[{"type":"bold"}]},{"type":"text","text":", or use "},{"type":"text","text":"Ctrl + Shift + K","marks":[{"type":"bold"}]},{"type":"text","text":" on Windows."}]},{"type":"paragraph","content":[{"type":"text","text":"Then click the "},{"type":"text","text":"\"+\"","marks":[{"type":"bold"}]},{"type":"text","text":" button and add a "},{"type":"text","text":"Hover","marks":[{"type":"bold"}]},{"type":"text","text":" variant. Inside that state, modify whatever you want: colors, spacing, opacity, size, or additional information. Framer will automatically animate the transition between states."}]},{"type":"paragraph","content":[{"type":"text","text":"Remix link:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://framer.link/oo0WpGy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/oo0WpGy","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/qujm709q","targetDeleted":false,"owned":true,"actions":{"postId":"019efb1d-a92f-7059-8b6e-ebd71ccf2075","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-25T15:30:24.899Z","latestAt":"2026-06-25T15:30:24.899Z"},{"id":"019eff67-5868-742b-8a69-b2bb4d627fda","type":"comment.reply","target":{"type":"post","id":"019efb1d-a92f-7059-8b6e-ebd71ccf2075","preview":"$53","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Day 2/365 of Framer Animations","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Today's topic is "},{"type":"text","text":"Hover Effects","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"In this video, I show a few practical examples."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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 "},{"type":"text","text":"Pressed","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Hover","marks":[{"type":"bold"}]},{"type":"text","text":" = cursor over the element. "},{"type":"text","text":"Pressed","marks":[{"type":"bold"}]},{"type":"text","text":" = mouse button held down or clicked."}]},{"type":"paragraph","content":[{"type":"text","text":"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 "},{"type":"text","text":"+2 gap","marks":[{"type":"bold"}]},{"type":"text","text":" (spacing between elements), and applied a subtle stroke around the image."}]},{"type":"paragraph","content":[{"type":"text","text":"To create a component, right-click an element and select "},{"type":"text","text":"Create Component","marks":[{"type":"bold"}]},{"type":"text","text":", or use "},{"type":"text","text":"Ctrl + Shift + K","marks":[{"type":"bold"}]},{"type":"text","text":" on Windows."}]},{"type":"paragraph","content":[{"type":"text","text":"Then click the "},{"type":"text","text":"\"+\"","marks":[{"type":"bold"}]},{"type":"text","text":" button and add a "},{"type":"text","text":"Hover","marks":[{"type":"bold"}]},{"type":"text","text":" variant. Inside that state, modify whatever you want: colors, spacing, opacity, size, or additional information. Framer will automatically animate the transition between states."}]},{"type":"paragraph","content":[{"type":"text","text":"Remix link:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://framer.link/oo0WpGy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/oo0WpGy","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/qujm709q","targetDeleted":false,"owned":true,"actions":{"postId":"019efb1d-a92f-7059-8b6e-ebd71ccf2075","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019eff67-5851-7155-b71b-e3faefa5448c","preview":"Ty so much!! ❤️","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Ty so much!! ❤️"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019efb1d-a92f-7059-8b6e-ebd71ccf2075","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019efdd4-4490-7599-a30a-a0b75b8ddde8"},"repost":null}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-25T15:30:23.464Z","latestAt":"2026-06-25T15:30:23.464Z"},{"id":"019eff67-392e-7766-a98f-cdbda83a7f25","type":"comment.liked","target":{"type":"comment","id":"019efdd4-4490-7599-a30a-a0b75b8ddde8","preview":"Nicely simplified.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Nicely simplified."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019efb1d-a92f-7059-8b6e-ebd71ccf2075","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019efdd4-4490-7599-a30a-a0b75b8ddde8"},"repost":null}},"context":{"type":"post","id":"019efb1d-a92f-7059-8b6e-ebd71ccf2075","preview":"$54","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Day 2/365 of Framer Animations","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Today's topic is "},{"type":"text","text":"Hover Effects","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"In this video, I show a few practical examples."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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 "},{"type":"text","text":"Pressed","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Hover","marks":[{"type":"bold"}]},{"type":"text","text":" = cursor over the element. "},{"type":"text","text":"Pressed","marks":[{"type":"bold"}]},{"type":"text","text":" = mouse button held down or clicked."}]},{"type":"paragraph","content":[{"type":"text","text":"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 "},{"type":"text","text":"+2 gap","marks":[{"type":"bold"}]},{"type":"text","text":" (spacing between elements), and applied a subtle stroke around the image."}]},{"type":"paragraph","content":[{"type":"text","text":"To create a component, right-click an element and select "},{"type":"text","text":"Create Component","marks":[{"type":"bold"}]},{"type":"text","text":", or use "},{"type":"text","text":"Ctrl + Shift + K","marks":[{"type":"bold"}]},{"type":"text","text":" on Windows."}]},{"type":"paragraph","content":[{"type":"text","text":"Then click the "},{"type":"text","text":"\"+\"","marks":[{"type":"bold"}]},{"type":"text","text":" button and add a "},{"type":"text","text":"Hover","marks":[{"type":"bold"}]},{"type":"text","text":" variant. Inside that state, modify whatever you want: colors, spacing, opacity, size, or additional information. Framer will automatically animate the transition between states."}]},{"type":"paragraph","content":[{"type":"text","text":"Remix link:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://framer.link/oo0WpGy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/oo0WpGy","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/qujm709q","targetDeleted":false,"owned":true,"actions":{"postId":"019efb1d-a92f-7059-8b6e-ebd71ccf2075","like":{"count":12,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-25T15:30:15.467Z","latestAt":"2026-06-25T15:30:15.467Z"},{"id":"019ef63b-d17b-740c-91ce-add8c444d9ef","type":"comment.reply","target":{"type":"post","id":"019ef62f-53f5-7353-8e94-6d84dfbe2ab9","preview":"$55","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Day 1/365 of Framer Animations","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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.","marks":[{"type":"italic"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"This first effect is the "},{"type":"text","text":"Appear Effect","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"And that's the level we should aim to reach."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/gzs89pa8","targetDeleted":false,"owned":true,"actions":{"postId":"019ef62f-53f5-7353-8e94-6d84dfbe2ab9","like":{"count":14,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ef63b-d168-719d-9d03-275c2f3ff06d","preview":"Thank you so much! 😀 I'm not a studio like you guys, but I hope my small contribution can help this community. After all, there's nothing better than someone who genuinely enjoys the work they do, right?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thank you so much! "},{"type":"emoji","attrs":{"name":"grinning","emoji":"😀"}},{"type":"text","text":" I'm not a studio like you guys, but I hope my small contribution can help this community. After all, there's nothing better than someone who genuinely enjoys the work they do, right?"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ef62f-53f5-7353-8e94-6d84dfbe2ab9","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019ef631-102c-7039-8f90-40d36892e654"},"repost":null}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-23T20:46:15.931Z","latestAt":"2026-06-23T20:46:15.931Z"},{"id":"019ef639-fd1c-775a-a276-39fae7dbfa15","type":"creator.followed","target":{"type":"creator","id":"a3a50c10-7d16-410f-8a82-19525b1f5ba2","preview":"Arini Studio LLC","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29247/avatar-e0gYlLBVVN9BbdX6o2q98TKsuGpZCG.jpg","slug":"arinistudio","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-23T20:44:16.023Z","latestAt":"2026-06-23T20:44:16.023Z"},{"id":"019ef637-618b-763f-a3d1-703561696f44","type":"comment.liked","target":{"type":"comment","id":"019ef631-102c-7039-8f90-40d36892e654","preview":"Awesome job! 👏","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Awesome job! "},{"type":"emoji","attrs":{"name":"clap","emoji":"👏"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ef62f-53f5-7353-8e94-6d84dfbe2ab9","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ef631-102c-7039-8f90-40d36892e654"},"repost":null}},"context":{"type":"post","id":"019ef62f-53f5-7353-8e94-6d84dfbe2ab9","preview":"$56","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Day 1/365 of Framer Animations","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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.","marks":[{"type":"italic"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"This first effect is the "},{"type":"text","text":"Appear Effect","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"And that's the level we should aim to reach."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/gzs89pa8","targetDeleted":false,"owned":true,"actions":{"postId":"019ef62f-53f5-7353-8e94-6d84dfbe2ab9","like":{"count":14,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-23T20:41:25.122Z","latestAt":"2026-06-23T20:41:25.122Z"},{"id":"019ed1c3-66c0-721d-8014-079121763456","type":"comment.liked","target":{"type":"comment","id":"019ed1bb-aa17-714c-9ba8-b9219f3a01b6","preview":"@Jon franca I do think the number of templates will increase, but that also means quality will matter even more. templates will need to be truly outstanding to stand out from the competition.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"mention","attrs":{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","slug":"jonata-franca","label":"Jon franca","mentionSuggestionChar":"@"}},{"type":"text","text":" I do think the number of templates will increase, but that also means quality will matter even more. templates will need to be truly outstanding to stand out from the competition."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed1b6-5f78-7208-a8b9-cad1886e6459","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed1b6-d3d9-74db-ac58-afbc990ec21f"},"repost":null}},"context":{"type":"post","id":"019ed1b6-5f78-7208-a8b9-cad1886e6459","preview":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed1b6-5f78-7208-a8b9-cad1886e6459","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-16T18:48:24.503Z","latestAt":"2026-06-16T18:48:24.503Z"},{"id":"019ed1bf-22ba-735a-a510-a0270572fdac","type":"template.created","target":{"type":"template","id":"66488","preview":"MODEL PARIS","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/21d4lh5e","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-06-16T18:43:44.954Z","latestAt":"2026-06-16T18:43:44.954Z"},{"id":"019ed1b8-9b59-74bb-a089-f713c012cef9","type":"comment.reply","target":{"type":"post","id":"019ed1b6-5f78-7208-a8b9-cad1886e6459","preview":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed1b6-5f78-7208-a8b9-cad1886e6459","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ed1b8-9b2e-756e-9a47-25c14fc6499e","preview":"ty so much!!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"ty so much!!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed1b6-5f78-7208-a8b9-cad1886e6459","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019ed1b7-5669-7008-8c82-146375ab4634"},"repost":null}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-16T18:36:37.081Z","latestAt":"2026-06-16T18:36:37.081Z"},{"id":"019ed1b8-88c0-77c8-b0c9-0eeba8047ed6","type":"comment.liked","target":{"type":"comment","id":"019ed1b7-5669-7008-8c82-146375ab4634","preview":"Copy all the Infos and Delete the draft one before submiting","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Copy all the Infos and Delete the draft one before submiting"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed1b6-5f78-7208-a8b9-cad1886e6459","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed1b7-5669-7008-8c82-146375ab4634"},"repost":null}},"context":{"type":"post","id":"019ed1b6-5f78-7208-a8b9-cad1886e6459","preview":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed1b6-5f78-7208-a8b9-cad1886e6459","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-16T18:36:32.308Z","latestAt":"2026-06-16T18:36:32.308Z"},{"id":"019ed1b8-30b6-741d-bfe7-1fe5b21fa5fe","type":"comment.reply","target":{"type":"post","id":"019ed1b6-5f78-7208-a8b9-cad1886e6459","preview":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed1b6-5f78-7208-a8b9-cad1886e6459","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ed1b8-309d-7777-b9d2-924abf37ed12","preview":"Do you think it will be harder to sell templates now without a social media presence, since this update will likely increase the number of templates available?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Do you think it will be harder to sell templates now without a social media presence, since this update will likely increase the number of templates available?"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed1b6-5f78-7208-a8b9-cad1886e6459","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019ed1b6-d3d9-74db-ac58-afbc990ec21f"},"repost":null}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-16T18:36:09.782Z","latestAt":"2026-06-16T18:36:09.782Z"},{"id":"019ed1b7-50e4-70be-b2a3-2b5f5449d2e3","type":"comment.liked","target":{"type":"comment","id":"019ed1b6-d3d9-74db-ac58-afbc990ec21f","preview":"Same here... i think we have to wait a bit","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Same here... i think we have to wait a bit"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed1b6-5f78-7208-a8b9-cad1886e6459","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed1b6-d3d9-74db-ac58-afbc990ec21f"},"repost":null}},"context":{"type":"post","id":"019ed1b6-5f78-7208-a8b9-cad1886e6459","preview":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed1b6-5f78-7208-a8b9-cad1886e6459","like":{"count":11,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","slug":"jonata-franca","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-16T18:35:12.479Z","latestAt":"2026-06-16T18:35:12.479Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:37dde9d1-e8de-44f2-bc46-ce9feda1c279:/unified/posts/?creator=37dde9d1-e8de-44f2-bc46-ce9feda1c279&with=reposts":[{"data":[{"id":"019f0514-47f7-73a3-a9eb-b7732fc726cb","title":null,"body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Day 4/365: Framer Animations","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Step 1","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Select your page and, in the right sidebar, go to the "},{"type":"text","text":"Desktop","marks":[{"type":"bold"}]},{"type":"text","text":" section. Click "},{"type":"text","text":"Effects","marks":[{"type":"bold"}]},{"type":"text","text":", then select "},{"type":"text","text":"All Pages","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Step 2","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"In the "},{"type":"text","text":"Page Effect","marks":[{"type":"bold"}]},{"type":"text","text":" panel, open "},{"type":"text","text":"This Page","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Under "},{"type":"text","text":"Mask","marks":[{"type":"bold"}]},{"type":"text","text":", change:"}]},{"type":"paragraph","content":[{"type":"text","text":"Type:","marks":[{"type":"bold"}]},{"type":"text","text":" Wipe"}]},{"type":"paragraph","content":[{"type":"text","text":"Angle:","marks":[{"type":"bold"}]},{"type":"text","text":" 270°"}]},{"type":"paragraph","content":[{"type":"text","text":"Step 3","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Still under "},{"type":"text","text":"This Page","marks":[{"type":"bold"}]},{"type":"text","text":", configure the "},{"type":"text","text":"Transition","marks":[{"type":"bold"}]},{"type":"text","text":" exactly as shown in the screenshot:"}]},{"type":"paragraph","content":[{"type":"text","text":"Duration:","marks":[{"type":"bold"}]},{"type":"text","text":" 0.6s"}]},{"type":"paragraph","content":[{"type":"text","text":"Easing:","marks":[{"type":"bold"}]},{"type":"text","text":" Use the same fast custom Bézier curve shown in the image."}]},{"type":"paragraph","content":[{"type":"text","text":"Step 4","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Before leaving "},{"type":"text","text":"This Page","marks":[{"type":"bold"}]},{"type":"text","text":", set:"}]},{"type":"paragraph","content":[{"type":"text","text":"Offset Y:","marks":[{"type":"bold"}]},{"type":"text","text":" -30%"}]},{"type":"paragraph","content":[{"type":"text","text":"Step 5","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Now switch to "},{"type":"text","text":"Any Page","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Here, the settings are almost identical, with one important difference:"}]},{"type":"paragraph","content":[{"type":"text","text":"Offset Y:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"30%","marks":[{"type":"bold"}]},{"type":"text","text":" (positive)"}]},{"type":"paragraph","content":[{"type":"text","text":"The "},{"type":"text","text":"-30%","marks":[{"type":"bold"}]},{"type":"text","text":" value is only used in "},{"type":"text","text":"This Page","marks":[{"type":"bold"}]},{"type":"text","text":". Using "},{"type":"text","text":"30%","marks":[{"type":"bold"}]},{"type":"text","text":" in "},{"type":"text","text":"Any Page","marks":[{"type":"bold"}]},{"type":"text","text":" reverses the animation, creating a smooth top-to-bottom transition."}]},{"type":"paragraph","content":[{"type":"text","text":"Step 6","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"For "},{"type":"text","text":"Any Page","marks":[{"type":"bold"}]},{"type":"text","text":", also set:"}]},{"type":"paragraph","content":[{"type":"text","text":"Mask:","marks":[{"type":"bold"}]},{"type":"text","text":" Wipe"}]},{"type":"paragraph","content":[{"type":"text","text":"Angle:","marks":[{"type":"bold"}]},{"type":"text","text":" 270°"}]},{"type":"paragraph","content":[{"type":"text","text":"Then copy the same custom Bézier easing from "},{"type":"text","text":"This Page","marks":[{"type":"bold"}]},{"type":"text","text":" and paste it into the "},{"type":"text","text":"Transition","marks":[{"type":"bold"}]},{"type":"text","text":" settings for "},{"type":"text","text":"Any Page","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Finally, set the duration between "},{"type":"text","text":"0.4s and 0.6s","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"This entire tutorial takes less than five minutes, and the result looks surprisingly polished."}]},{"type":"paragraph","content":[{"type":"text","text":"If anything was unclear, let me know in the comments! I tried to explain everything as simply as possible."}]},{"type":"paragraph","content":[{"type":"text","text":"Thanks for reading, and see you tomorrow!"}]}]},"author":{"framerUserId":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","slug":"jonata-franca","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/1LZWl3emnv0201fnIQL4hjCbDuhjWWZCcUoo7Kyf2mts8.m3u8","metadata":{"posterUrl":"https://image.mux.com/1LZWl3emnv0201fnIQL4hjCbDuhjWWZCcUoo7Kyf2mts8/thumbnail.webp?time=2","aspectRatio":"16:9","duration":10.042667}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/wdlaa8qf","metadata":{"tint":{"h":210,"s":67,"l":9},"width":477,"height":406}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/tz1zqnau","metadata":{"tint":{"h":0,"s":0,"l":9},"width":520,"height":370}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/1hkaejsk","metadata":{"tint":{"h":0,"s":0,"l":9},"width":532,"height":454}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/g4hhjpk3","metadata":{"tint":{"h":0,"s":0,"l":9},"width":463,"height":547}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":13,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-26T17:57:23.067Z","updatedAt":"2026-06-26T17:57:23.067Z"},{"id":"019f0039-b907-7137-872a-335dbc5c131d","title":null,"body":"$58","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Day 3/365 of Framer Animations","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Today I'll talk about "},{"type":"text","text":"easing","marks":[{"type":"bold"}]},{"type":"text","text":": the transitions between states when changing movement, colors, variants, and more."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Linear","marks":[{"type":"bold"}]},{"type":"text","text":" Constant speed from start to finish. Predictable and robotic. Best for infinite loops, progress bars, and loading screens."}]},{"type":"paragraph","content":[{"type":"text","text":"Ease In","marks":[{"type":"bold"}]},{"type":"text","text":" Starts slow and accelerates. Adds weight, making it great for large elements leaving the screen, such as drawers and modals. Avoid it for entrances."}]},{"type":"paragraph","content":[{"type":"text","text":"Ease Out","marks":[{"type":"bold"}]},{"type":"text","text":" Starts fast and slows down smoothly. Perfect for buttons, cards, and elements entering the screen. Usually not ideal for exits."}]},{"type":"paragraph","content":[{"type":"text","text":"Ease In Out","marks":[{"type":"bold"}]},{"type":"text","text":" 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."}]},{"type":"paragraph","content":[{"type":"text","text":"Spring","marks":[{"type":"bold"}]},{"type":"text","text":" You control duration and overshoot. Great for micro-interactions like toggles, checkmarks, and playful UI elements."}]},{"type":"paragraph","content":[{"type":"text","text":"Spring Physics","marks":[{"type":"bold"}]},{"type":"text","text":" You don't control duration, only the physics: • "},{"type":"text","text":"Stiffness","marks":[{"type":"bold"}]},{"type":"text","text":" = spring tension • "},{"type":"text","text":"Damping","marks":[{"type":"bold"}]},{"type":"text","text":" = bounce resistance • "},{"type":"text","text":"Mass","marks":[{"type":"bold"}]},{"type":"text","text":" = weight/inertia"}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for drag-and-drop, swipes, and gesture-based interactions."}]},{"type":"paragraph","content":[{"type":"text","text":"Back In","marks":[{"type":"bold"}]},{"type":"text","text":" Moves backward before moving forward. Creates anticipation, like someone crouching before a jump. Great for exits."}]},{"type":"paragraph","content":[{"type":"text","text":"Back Out","marks":[{"type":"bold"}]},{"type":"text","text":" Overshoots the destination before settling. Feels elastic, organic, and lively."}]},{"type":"paragraph","content":[{"type":"text","text":"Back In Out","marks":[{"type":"bold"}]},{"type":"text","text":" Combines anticipation and overshoot. Used carefully on icons and UI elements, it adds personality and helps your brand stand out."}]},{"type":"paragraph","content":[{"type":"text","text":"The \"Back\" transitions are some of the easiest ways to make motion feel unique rather than generic."}]},{"type":"paragraph","content":[{"type":"text","text":"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!"}]}]},"author":{"framerUserId":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","slug":"jonata-franca","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/xDsfcsitl9kCj2RWNbNckjRaZPmg2IZrK01NDkPVGL2c.m3u8","metadata":{"posterUrl":"https://image.mux.com/xDsfcsitl9kCj2RWNbNckjRaZPmg2IZrK01NDkPVGL2c/thumbnail.webp?time=7.7","aspectRatio":"16:9","duration":14.376}},{"type":"video","url":"https://stream.mux.com/R5R01tfUUYnSNJo6GPIsMmqb5QK2xUYk6r015nLI13Pws.m3u8","metadata":{"posterUrl":"https://image.mux.com/R5R01tfUUYnSNJo6GPIsMmqb5QK2xUYk6r015nLI13Pws/thumbnail.webp?time=2.208","aspectRatio":"1:1","duration":4.416667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-25T19:20:10.764Z","updatedAt":"2026-06-25T19:20:10.764Z"},{"id":"019efb1d-a92f-7059-8b6e-ebd71ccf2075","title":null,"body":"$59","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Day 2/365 of Framer Animations","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Today's topic is "},{"type":"text","text":"Hover Effects","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"In this video, I show a few practical examples."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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 "},{"type":"text","text":"Pressed","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Hover","marks":[{"type":"bold"}]},{"type":"text","text":" = cursor over the element. "},{"type":"text","text":"Pressed","marks":[{"type":"bold"}]},{"type":"text","text":" = mouse button held down or clicked."}]},{"type":"paragraph","content":[{"type":"text","text":"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 "},{"type":"text","text":"+2 gap","marks":[{"type":"bold"}]},{"type":"text","text":" (spacing between elements), and applied a subtle stroke around the image."}]},{"type":"paragraph","content":[{"type":"text","text":"To create a component, right-click an element and select "},{"type":"text","text":"Create Component","marks":[{"type":"bold"}]},{"type":"text","text":", or use "},{"type":"text","text":"Ctrl + Shift + K","marks":[{"type":"bold"}]},{"type":"text","text":" on Windows."}]},{"type":"paragraph","content":[{"type":"text","text":"Then click the "},{"type":"text","text":"\"+\"","marks":[{"type":"bold"}]},{"type":"text","text":" button and add a "},{"type":"text","text":"Hover","marks":[{"type":"bold"}]},{"type":"text","text":" variant. Inside that state, modify whatever you want: colors, spacing, opacity, size, or additional information. Framer will automatically animate the transition between states."}]},{"type":"paragraph","content":[{"type":"text","text":"Remix link:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://framer.link/oo0WpGy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/oo0WpGy","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]}]},"author":{"framerUserId":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","slug":"jonata-franca","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/EeaVFxsR01UGnFQjk6VALJ3orK4rMXSHWL3eB3lNfqiw.m3u8","metadata":{"posterUrl":"https://image.mux.com/EeaVFxsR01UGnFQjk6VALJ3orK4rMXSHWL3eB3lNfqiw/thumbnail.webp?time=24.9","aspectRatio":"16:9","duration":26.942667}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/qujm709q","metadata":{"tint":{"h":0,"s":0,"l":9},"width":3200,"height":1800}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-24T19:31:25.619Z","updatedAt":"2026-06-24T19:31:25.619Z"},{"id":"019ef62f-53f5-7353-8e94-6d84dfbe2ab9","title":null,"body":"$5a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Day 1/365 of Framer Animations","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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.","marks":[{"type":"italic"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"This first effect is the "},{"type":"text","text":"Appear Effect","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"And that's the level we should aim to reach."}]}]},"author":{"framerUserId":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","slug":"jonata-franca","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/A00w1rWKZQfw2Fym5qW43TI8Q6dM9r53jolZfEF01009Q4.m3u8","metadata":{"posterUrl":"https://image.mux.com/A00w1rWKZQfw2Fym5qW43TI8Q6dM9r53jolZfEF01009Q4/thumbnail.webp?time=3.5","aspectRatio":"16:9","duration":5.976}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/gzs89pa8","metadata":{"tint":{"h":0,"s":0,"l":9},"width":3200,"height":1800}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/7l77q82r","metadata":{"tint":{"h":0,"s":0,"l":9},"width":3200,"height":1800}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ahes3q7i","metadata":{"tint":{"h":0,"s":0,"l":9},"width":3200,"height":1800}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":14,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-23T20:32:37.371Z","updatedAt":"2026-06-23T20:32:37.371Z"},{"id":"019eef74-55f0-7412-b727-5e710a45035d","title":null,"body":"

If you read this, let's connect.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"If you read this, let's connect.","marks":[{"type":"bold"}]}]}]},"author":{"framerUserId":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","slug":"jonata-franca","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-22T13:10:39.347Z","updatedAt":"2026-06-22T13:10:39.347Z"},{"id":"019ed1bf-12c5-72cf-b57b-7b9c2058aad4","title":null,"body":"

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

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A fashion agency template for those who work in this niche or want to develop their skills as a web designer!","marks":[{"type":"italic"}]}]}]},"author":{"framerUserId":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","slug":"jonata-franca","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","followed":false,"followsYou":false},"media":[],"resources":[{"id":"66488","resolved":true,"title":"MODEL PARIS","body":"$5b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built for:"}]},{"type":"paragraph","content":[{"type":"text","text":"— Modelling agencies launching their digital presence"}]},{"type":"paragraph","content":[{"type":"text","text":"— Studios that need a high-end fashion frontend ready in a day"}]},{"type":"paragraph","content":[{"type":"text","text":"— Designers building client sites in the luxury or talent space"}]},{"type":"paragraph","content":[{"type":"text","text":"— Anyone who wants a template that looks like it costs more than it does"}]},{"type":"paragraph","content":[{"type":"text","text":"HOME","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A cinematic editorial landing page designed to feel like a real luxury agency website."}]},{"type":"paragraph","content":[{"type":"text","text":"Includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"Full-bleed editorial hero section"}]},{"type":"paragraph","content":[{"type":"text","text":"Horizontal scrolling model roster"}]},{"type":"paragraph","content":[{"type":"text","text":"Latest Works gallery featuring 8 editorial covers"}]},{"type":"paragraph","content":[{"type":"text","text":"“Model of the Year” spotlight section"}]},{"type":"paragraph","content":[{"type":"text","text":"Animated agency timeline from foundation to present day"}]},{"type":"paragraph","content":[{"type":"text","text":"MODELS","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A complete agency-style talent directory with 16 fully designed individual model pages."}]},{"type":"paragraph","content":[{"type":"text","text":"Features:"}]},{"type":"paragraph","content":[{"type":"text","text":"Filterable by country: France, Italy, Spain, and Russia"}]},{"type":"paragraph","content":[{"type":"text","text":"Professional editorial-style biographies"}]},{"type":"paragraph","content":[{"type":"text","text":"Full model statistics including:"}]},{"type":"paragraph","content":[{"type":"text","text":"Height (cm + imperial)"}]},{"type":"paragraph","content":[{"type":"text","text":"Bust / Waist / Hips"}]},{"type":"paragraph","content":[{"type":"text","text":"Shoe size (EU + US)"}]},{"type":"paragraph","content":[{"type":"text","text":"Date of birth"}]},{"type":"paragraph","content":[{"type":"text","text":"Instagram profile link"}]},{"type":"paragraph","content":[{"type":"text","text":"Every profile was written to feel authentic to high-end fashion agencies."}]},{"type":"paragraph","content":[{"type":"text","text":"NEWS","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A fully structured editorial publishing system built directly into the template."}]},{"type":"paragraph","content":[{"type":"text","text":"Includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"10+ pre-made articles"}]},{"type":"paragraph","content":[{"type":"text","text":"6 editorial categories:"}]},{"type":"paragraph","content":[{"type":"text","text":"Campaign"}]},{"type":"paragraph","content":[{"type":"text","text":"Industry"}]},{"type":"paragraph","content":[{"type":"text","text":"Trends"}]},{"type":"paragraph","content":[{"type":"text","text":"Spotlight"}]},{"type":"paragraph","content":[{"type":"text","text":"Making-of"}]},{"type":"paragraph","content":[{"type":"text","text":"Editorial"}]},{"type":"paragraph","content":[{"type":"text","text":"Featured article section"}]},{"type":"paragraph","content":[{"type":"text","text":"Filterable article grid"}]},{"type":"paragraph","content":[{"type":"text","text":"Individual article pages"}]},{"type":"paragraph","content":[{"type":"text","text":"Author information"}]},{"type":"paragraph","content":[{"type":"text","text":"Breadcrumb navigation"}]},{"type":"paragraph","content":[{"type":"text","text":"Related posts section"}]},{"type":"paragraph","content":[{"type":"text","text":"GET SCOUTED","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A premium scouting experience designed for real submissions."}]},{"type":"paragraph","content":[{"type":"text","text":"Includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"Advanced scouting form"}]},{"type":"paragraph","content":[{"type":"text","text":"Visual photo submission guidelines"}]},{"type":"paragraph","content":[{"type":"text","text":"7 structured form fields"}]},{"type":"paragraph","content":[{"type":"text","text":"Dropdown selectors for:"}]},{"type":"paragraph","content":[{"type":"text","text":"Country"}]},{"type":"paragraph","content":[{"type":"text","text":"Eye color"}]},{"type":"paragraph","content":[{"type":"text","text":"Hair color"}]},{"type":"paragraph","content":[{"type":"text","text":"Skin tone"}]},{"type":"paragraph","content":[{"type":"text","text":"Availability"}]},{"type":"paragraph","content":[{"type":"text","text":"Built to feel significantly more professional and complete than typical agency templates."}]},{"type":"paragraph","content":[{"type":"text","text":"CONTACT","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A clean contact experience for agencies, brands, and talent inquiries."}]},{"type":"paragraph","content":[{"type":"text","text":"Includes:"}]},{"type":"paragraph","content":[{"type":"text","text":"Inquiry form"}]},{"type":"paragraph","content":[{"type":"text","text":"5-question FAQ accordion covering the most common agency topics"}]},{"type":"paragraph","content":[{"type":"text","text":"LEGAL","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Essential legal pages already included."}]},{"type":"paragraph"}]},"introduction":"Built like a real agency.","slug":"model-paris","author":{"framerUserId":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","slug":"jonata-franca","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/21d4lh5e","metadata":{"tint":{"h":0,"s":0,"l":9},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ry9q829y","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/y57py2bf","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/zcnrp3ug","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-06-16T18:43:37.287Z","updatedAt":"2026-06-16T18:43:37.287Z","publishedAt":"2026-06-16T18:43:37.058Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"42","paymentUrl":"https://jonfranca.gumroad.com/l/LAURENT?wanted=true","remixUrl":null,"previewUrl":"https://laurentfashion.framer.website/","categories":[{"id":3,"name":"Agency","slug":"agency"},{"id":19,"name":"Portfolio","slug":"portfolio"},{"id":214,"name":"Fashion","slug":"fashion"}],"styles":[{"id":247,"name":"Professional","slug":"professional"},{"id":109,"name":"Modern","slug":"modern"},{"id":111,"name":"Minimal","slug":"minimal"},{"id":208,"name":"Dark","slug":"dark"}],"mainCategory":{"id":3,"name":"Agency","slug":"agency"},"features":[{"id":1,"name":"Appear Effects","slug":"appear-effects"},{"id":13,"name":"Slideshows/Tickers","slug":"slideshows-tickers"},{"id":17,"name":"Sticky Scrolling","slug":"sticky-scrolling"},{"id":18,"name":"Scroll Effects","slug":"scroll-effects"},{"id":21,"name":"CMS","slug":"cms"},{"id":23,"name":"Rich Media","slug":"rich-media"},{"id":24,"name":"Site Search","slug":"site-search"},{"id":25,"name":"Custom Cursors","slug":"custom-cursors"},{"id":30,"name":"Forms","slug":"forms"},{"id":32,"name":"Layout Templates","slug":"layout-templates"},{"id":35,"name":"Text Effects","slug":"text-effects"}],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":14,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-16T18:43:40.869Z","updatedAt":"2026-06-16T18:43:40.869Z"},{"id":"019ed1b6-5f78-7208-a8b9-cad1886e6459","title":null,"body":"

I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I'm trying to submit my template, but I keep getting an error. Is anyone else having the same issue?"}]}]},"author":{"framerUserId":"37dde9d1-e8de-44f2-bc46-ce9feda1c279","name":"Jon frança","slug":"jonata-franca","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/37dde9d1-e8de-44f2-bc46-ce9feda1c279/ojod5cky","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":9},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-16T18:34:10.684Z","updatedAt":"2026-06-16T18:34:10.684Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L5c"}]