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.

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.

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.

Define color styles with both a light and dark value, then use within your layouts, text styles, components and effects.

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.

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.

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

In this video, we introduce effects in components. This is a major update that will make it easier to create reusable and animated components.

Creative Effects make it incredibly easy to add high-fidelity interactions and animations to your site.

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.

This update introduces Collection References in the CMS. This long awaited feature allows you to reference items from one CMS collection to another, enabling dynamic, reusable content throughout your site. Instead of manually inputting related information across multiple entries, reference fields let you pull data like an author’s name, bio, or avatar from a separate collection, ensuring data consistency and efficiency. Multi-reference fields allow for adding multiple items like tags, post categories, or job benefits to be linked to a single entry. These features simplify content management, automatically reflecting updates across all related entries, and offer flexibility in organizing complex content structures for your designs.

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.

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.

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.

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.