Design professional sites—without code.

Animate characters, words, lines, and elements with real-time previews. Choose presets or create custom effects with properties like Scale, Blur, and Offset. Trigger animations on Appear, Layer In View, or Section In View.

The Form Builder brings fully functional, interactive forms to Framer, without the need for any third party components or integrations. Joseph shows you how easy it is to build a form, style it, and publish it to the web.

We’ll cover the differences between Frames, Stacks and Grids, and when to use which.

Learn best practices for structuring your layouts for optimal responsiveness.

Place any layer in 3D space by editing properties like Rotation, Skew, Origin, Depth, and Perspective. For the first time on a freeform Canvas, all 3D layers remain selectable and editable, resulting in an amazing experience.

The Creative Section to the Insert Panel, with fun components and presets that you can use to bring your sites to life. You might recognize a few of these from framer.supply—we have redesigned and reimplemented these.

Turn properties like Gap, Padding, Direction, Distribute, and Align into customizable controls, allowing you to design much more flexible Components.

Design expressive pages with sections that adapt to the height of the browser.

Learn how create links that animate to specific sections of your web page.

Make elements stick and unstick to the top while scrolling their parent.

Add high-fidelity effects and animate variants within specific sections.

Design expressive landing pages with complete control over the scroll position.

Learn how to add links to any page, or set up a link to anchor to a specific section of a page.

Build a beautiful desktop navigation bar.

Creating a mobile menu that animates to the viewport height when opened is easy with the right properties.

Make your mobile menu animations more interesting by adding custom transitions.

Animate characters, words, lines, and elements with real-time previews. Choose presets or create custom effects with properties like Scale, Blur, and Offset. Trigger animations on Appear, Layer In View, or Section In View.

Design interactive cursors using components, with infinite ways to customize. Tap into the power of Variants, Effects, and Transitions to design interactions with an incredible fidelity.

The Creative Section to the Insert Panel, with fun components and presets that you can use to bring your sites to life. You might recognize a few of these from framer.supply—we have redesigned and reimplemented these.

Built on top of the View Transitions API, Framer is the first tool in which you can explore page to page animations visually.

The CMS has everything you need to manage blog posts, job listings, or marketing pages.

Bring content from any source and add it to your Framer site.

You can easily filter your CMS collection lists, enabling you to customize the presentation of your content.

In this video you’ll learn how to build a component that allows your visitors to filter your content by date.

How component variants can power custom form focus, blur, invalid, and valid states — with built-in validation logic that updates in real time as a visitor types in a field.

When a visitor on your site submits a form, there are a few different ways that we can keep them informed on the status of their submission — four ways in fact. Let’s take a look at each one.

Let’s say another designer, or even we ourselves, took the time to design a custom Submit button component, along with all of its states and variants. It would be silly to have to do that over and over again for every form.

We’ve reviewed default input properties like type, name, and placeholder. Now, let's explore useful optional properties. I'll cover them slightly out of order but will explain how each optional input property works.

Localization in Framer is a feature that allows you to easily customize your website for different languages and regions.

Hiding CMS items & webpages per locale ensures content relevance, while localized slugs & redirects control URLs. The new Set Locale action in Components allows custom Locale picker creation.

Add a custom AI Style within your Locale Options to gain full control over how your content is translated. Define your brand tone, add key context, specify ignored words, and more—then let AI Translation handle the rest.

Design smooth CSS-based carousels that can be scrolled, swiped, and navigated between using either arrows or dots.

Use the Cookie Banner Component, powered by Google’s Consent Mode.

The Input Component allows you to easily capture email signups on your sites.

Easily add Search functionality into your site by dragging the Search component from the Insert Panel into your project.

Learn how to open and edit Framer templates. Templates in Framer are duplicates of projects other people have made. Open the project, edit the content and attach a site plan to launch your website.

In this video, you’ll learn how to prepare your Framer template for submission and increase your chances of being accepted on the Framer website.

This is a tutorial on how to add your Framer template to Lemon Squeezy and start selling it.

Learn how to set your site’s title, description and image for search and socials.

Learn how to add password protection to your Framer website using simple steps.

In this tutorial, you’ll learn how to add Custom Code to your Framer website.

Learn how to set up a free subdomain or seamlessly integrate your own domain.

A third-party tool called FramerAuth now makes it possible to add authentication to your Framer website, which allows you to lock your content to members only.

Fetch enables you to leverage the power of APIs to add dynamic data to your Framer Site—without any code.

Learn how to create an interactive component with a dynamic slide image and progress bar.