How to create a simple landing page in Framer—completely from scratch, and in just about 15 minutes.

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.

With the Figma plugin installed, you can copy over layers from Figma to Framer.

A Framer Tutorial about Components, covering Variants, Variables and Interactions.

Effortlessly copy and paste web elements from any of your own sites and paste them directly onto the Framer canvas.

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 create engaging and dynamic phone content that adapts as you scroll through different sections.

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.

This release brings new properties that unlock new types of navigation patterns.

Kickstart custom animations whenever you scroll up or down, like fading out a navigation bar when people scroll down.

Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more.

Learn how to create a responsive navigation with dropdowns in Framer—completely from scratch.

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.

Light effects make it incredibly easy to add high-fidelity interactions and animations to your site.

In this video, you’ll learn how to create a rotating grid of videos as you start scrolling down the page.

Get ready to make a splash with this wave-tastic tutorial.

Go from a full-screen video to a slideshow of videos by scrolling down the page.

Create a canvas-like website by making the entire website draggable and include elements you can drag around.

Learn how to create video overlays in the following tutorial.

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.

With the Is Set conditional for Formatted Text fields, you can adapt your layout based on when your CMS Content exists.

Learn how to define Scroll Sections within CMS Collection Lists.

With the bold and italic options in Text Styles, you can emphasize your text with granular control of the fonts.

Document and present your code in Framer with Code Blocks & Inline Code.

Combine CMS collections to build a dynamic blog with author pages.

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.

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

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.

Design your own slideshows with custom spring transitions with ease.

Create infinitely scrolling sections that connect seamlessly powered by Motion.

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.

Learn how to set up redirects to efficiently direct users from one page to another.

Learn how to effectively manage staging and versions for your Framer website.

Gain valuable insights into how your site and pages are performing.

Go back in time and copy paste layers into the present.

Turn any Framer site into a functioning Shopify store.

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.

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