💙 Introducing Scroll Transforms in
@framer
. Design expressive landing pages with complete control over the scroll position. All powered by Motion. Create sites with incredible fidelity. Watch the video here:
✨ meet
add some pizzazz to your sites with these funky components for
@framer
. available in a single place for easy copy and pasting. includes a bunch of brand new components: color cycle, random color, noise, grain and squircles.
have fun!
✨ Introducing Relative Overlays, a completely new way to design navigations in
@framer
. Create dropdowns, menus, and tooltips within minutes. Watch the video below to learn more!
✍️ animator for
@framer
is now available!
copy and paste on the canvas to add to your project. animate any graphic path, and combine with appear effects for even more expressive animations.
put together a lil page with demos here:
🫰 meet
high quality navigation patterns for your next
@framer
site. get started in minutes with one of the 10 interactive demos, and learn how they were made via the accompanying videos.
happy publishing!
🖤 Introducing all-new effects in
@framer
. Hover, Press, Drag, and Loop. Add stunning interactions and animations to your sites in seconds. Watch the video here:
Here’s a new
@framer
demo showcasing the types of interactions and animations made possible by today’s release. Motion meets Framer.
✓ Scroll Speed
✓ Scroll Animation
✓ Scroll Variants
✓ Appear Effects
✓ Smooth Scroll
💛 Super excited to announce a
@fontshare_com
×
@framer
integration. All Fontshare fonts are now available directly within Framer. Many thanks to our friends at
@itfoundry
. Craft exceptional websites with best-in-class typography. Only in Framer.
💙 Page Effects are now available in
@framer
. Built on top of View Transitions, we’re one of the very first tools allowing you to animate between pages visually. Check out the video to learn more!
🌗 Coming soon to
@framer
—theming. One of our most requested features. Design a light and dark palette, then use within your pages, components, effects, icons, and more. Framer handles the rest. Stay tuned.
We’ve been working hard on making high-fidelity prototyping in Framer simple, expressive and fast. Here’s an example of the types of interactions you can now design visually using Magic Motion, Interactions and Components. No code!
✨We’ve worked with the
@LottieFiles
team to create a new
@framer
integration for DotLottie files. Add incredible animations to your websites with tiny file sizes. Play on hover, click, scroll, or automatically.
Today, we shipped a major canvas performance update
@framer
, made possible by a completely new renderer. This makes the editing experience much faster, especially within huge projects.
🪂 New
@framer
airdrop—just added Arc Text to . Quickly copy and paste it onto your project, or remix the linked demo project containing all three examples: Circle, Ellipse and Custom Path.
✨ new
@framer
component: arc
place and animate text on a circle, ellipse or custom path. animate using motion or svg. great for badges! even keeps your text selectable. no need for wrapping frames or code overrides. made with
@hemlok_
remix here:
⚡️We just shipped a set of amazing performance improvements
@framer
. Your projects are up to 2X faster to load and edit, use less memory, and your sites will perform even better once published, too. See our full changelog here:
💛 meet morpher for
@framer
smoothly morph flat shapes into one another. combine with appear effects. copy and paste on the canvas to add to your project, or remix my demo to start playing. made together with
@mattgperry
🌞 Introducing all-new Color Styles with Themes in
@framer
. Create a Color Style, define a Light and Dark version, then use throughout your project. Your site will adapt automatically. One of our most requested features. Watch the video here:
⚡️ Excited to introduce our completely re-engineered preview, optimized for performance. Even in huge sites, your pages should now load instantly. No more staring at loading spinners.
We’ve been working on a complete refresh of the Framer interface for a few months now, and it’s finally available in Beta! I’d love to hear your thoughts.
New in Framer Motion 2.3: useMotionTemplate. This allows you to combine multiple MotionValues into a single string, which is useful for animating properties like shadow. See an example below!
✨ something i’ve been tinkering on with
@hemlok_
for
@framer
:
a new arc component that allows you to place text on any path. you can edit the path in realtime and see how the text adapts. plus, you can animate along your path and create infinite loops. really fun!
🖤 Introducing Fit Text for
@framer
. Design bold headings that scale to fit. Works with any font, supports multiple lines, supports min and max widths, and is extremely performant. Very proud of this one. Amazing work by
@hemlok_
This
@framer
update introduces Variable support for all Styles. We’ve added 12 new Variables, including Border, Shadow, Transition, and many more. Your components just got more powerful.
🫠 ported cobe by
@shuding_
to
@framer
with some extra properties to customize layout and style. pretty fun to play with! you can customize the drag transition with Motion’s useSpring.
🖤 New in
@framer
—you can now add Variables to Stack properties like Align, Direction, Gap, Padding, and more. Plus, all of your animations will now keep working in the Preview, pinky promise.
🖤 Introducing Viewport unit support for Min Height and Max Height in
@framer
—unlocking new types of desktop navigations. Watch the video tutorial or remix the demo to learn more.
🫰 we just shipped a huge
@framer
update with tons of experience improvements, quality-of-life features and general fixes—with more updates coming later this week. see highlights here:
🔢 New in
@framer
: support for H4, H5, and H6 Text Styles. Plus, all Text and Link Styles are now optional, meaning you can keep your templates cleaner than ever, and only include the ones you use.
😌 introducing particles for
@framer
add some pizzazz to your sites with the magic of
@tsParticles
. create static, animated and/or interactive particles, and explore infinite combinations via the property panel. its fun!
demo page:
🖤 New in
@framer
—design side scrolling navigations without any variants. The additions of Overflow X and Overflow Y, plus a new Scrollbars property, unlock new types of navigation patterns.
Today’s
@framer
update brings dynamic rotation and resizing cursors, better automatic nesting, seamless previewing, and layout tools that can project in 3D. Watch my little overview video below to learn more.
🫠 heading for
@framer
easily create fluid text that scales to your viewport, with a min and max size. pure css and fully compatible with smart components and effects. copy the component link or remix my demo to get started
Magic Motion also unlocks "masking" transitions in Framer. Every Frame has an Overflow property that makes animations like these very simple to set up.
I just published a brand new package that I’ve been working on with
@mattgperry
and
@blixt
called Morpher. It allows you to animate between shapes drawn directly on the Canvas—it’s a lot of fun to play with, and I’m very excited to have it out there.
🎁 Updated with 2 new patterns and a completely refreshed desktop navigation demo. The previous one required 4 components, this has just 1, thanks to recent
@framer
updates.
💙 Looking to try
@framer
over the holidays? I’ve made a new beginner tutorial showing you how to make your first site from scratch. Follow along, it’s fun!
We refreshed the publishing experience in
@framer
. You can now publish to production without jumping into settings, see realtime optimization status, and catch errors before publishing. Safer, yet faster.
✨ Today, we’re adding Scroll Animations to
@framer
. This is a huge update that brings much of the magic of Motion to Framer and unlocks a new level of interactive output. We’re very excited to share this with you.
Watch the video here:
🖤 You can now design your own patterns directly within
@framer
. We’ve added a new Tile option to Image Fills, and have included a bunch of scalable preset patterns to pick from as well.
🫠 syntax for
@framer
add code snippets to your landing pages or share code snippets via mini-sites. comes with multiple themes, including a custom one by me. uses highlight.js for most languages, and prism.js for jsx and tsx. made with
@hemlok_
Magic Motion also enables animation orchestration in Framer. Instead of designing your transitions from A to B, you can add intermediate states to create more unique (or detailed) interactions. See below for a few examples.
We’ve added collision detection and nesting support to relative overlays in
@framer
. Combined with our dynamic safe area and effects, you can now design incredibly polished menus in minutes.
✨ We just shipped the February Update
@framer
, adding automatic background tinting and new layout options for Components, plus a whole lot more. Learn more: