Academy

Academy

How to use overlays

Learn how to create video overlays in the following tutorial.

Learn how to create video overlays in the following tutorial.

Remix Project

Remix Project

Remix Project

More videos

Version History

3:00

Version History

3:00

Copy from HTML

3:10

Copy from HTML

3:10

Components

16:10

Components

16:10

Import from Figma

9:40

Import from Figma

9:40

Breakpoints

16:15

Breakpoints

16:15

Layout & Sizing

14:17

Layout & Sizing

14:17

Build Your First Site

52:00

Build Your First Site

52:00

Scroll Variant

8:18

Scroll Variant

8:18

Scroll Transforms

17:06

Scroll Transforms

17:06

Scroll Animations

12:47

Scroll Animations

12:47

Sticky Scrolling

4:33

Sticky Scrolling

4:33

Scroll Targets

7:10

Scroll Targets

7:10

Overlays

6:20

Overlays

6:20

Responsive Dropdown Menu

19:48

Responsive Dropdown Menu

19:48

Relative Overlays

10:20

Relative Overlays

10:20

Scroll Direction

3:10

Scroll Direction

3:10

Horizontal Side Scroller

3:01

Horizontal Side Scroller

3:01

Mobile Menu: Fade-In

10:44

Mobile Menu: Fade-In

10:44

Mobile Menu

6:27

Mobile Menu

6:27

Desktop Menu

7:12

Desktop Menu

7:12

Fit Text

3:28

Fit Text

3:28

Realistic Shadows

2:28

Realistic Shadows

2:28

Light & Dark Mode

5:44

Light & Dark Mode

5:44

Viewport Height

Viewport Height

Code Blocks

Code Blocks

Bold & Italic

Bold & Italic

Scroll Sections

Scroll Sections

Conditionals & Transforms

Conditionals & Transforms

Date Filtering

Date Filtering

Filtering

Filtering

CSV import

CSV import

CMS Overview

CMS Overview

Ticker

Ticker

Slideshow

Slideshow

Search

Search

Input

Input

Cookie Banner

Cookie Banner

Carousel

Carousel

Staging & Versions

Staging & Versions

Redirects

Redirects

Custom Domains

Custom Domains

Custom Code

Custom Code

Password Protection

Password Protection

Metadata

Metadata

Sell on Lemon Squeezy

Sell on Lemon Squeezy

Canvas-like website

Canvas-like website

Apple Zoom Scroll Effect

Apple Zoom Scroll Effect

Wave Animation

Wave Animation

Creative Effects

Creative Effects

Component Effects

Component Effects

Page Effects

Page Effects

How to Link Pages

How to Link Pages

AI Translations Style

AI Translations Style

Prepare your Template

Prepare your Template

Stack Variables

Stack Variables

How to use Templates

How to use Templates

Creative Elements

3:23

Creative Elements

3:23

Custom Cursors

16:54

Custom Cursors

16:54

Advanced Localization

6:31

Advanced Localization

6:31

3D Transforms

12:45

3D Transforms

12:45

Localize your site

8:07

Localize your site

8:07

Text Effects

3:52

Text Effects

3:52

Fetch

10:27

Fetch

10:27

Variants & Validation

7:51

Variants & Validation

7:51

Update Form Status

6:04

Update Form Status

6:04

Custom Form Submit Button

2:10

Custom Form Submit Button

2:10

Optional Form Input Props

5:18

Optional Form Input Props

5:18

Creating your first form

10:58

Creating your first form

10:58

The Anatomy of a Project

5:38

The Anatomy of a Project

5:38

Interacting with Layers

1:10

Interacting with Layers

1:10

Thinking in Frames

3:53

Thinking in Frames

3:53

Absolute Positioning

7:39

Absolute Positioning

7:39

Stacks and Relative Positioning

8:05

Stacks and Relative Positioning

8:05

Sizing to Fill and Fit Content

7:37

Sizing to Fill and Fit Content

7:37

Stacks vs Grids

7:45

Stacks vs Grids

7:45

Fixed and Sticky Positioning

4:09

Fixed and Sticky Positioning

4:09

Relative, Fixed, and Viewport Sizing

7:05

Relative, Fixed, and Viewport Sizing

7:05

Min and Max Sizing

8:26

Min and Max Sizing

8:26

Adding Images, Video, and Text

6:08

Adding Images, Video, and Text

6:08

The Insert Panel

5:13

The Insert Panel

5:13

Adding Links

10:30

Adding Links

10:30

Styling Frames

10:47

Styling Frames

10:47

Link and Color Styles

9:36

Link and Color Styles

9:36

Text Styles

7:06

Text Styles

7:06

Themes

6:30

Themes

6:30

Components

16:57

Components

16:57

Layout Templates

12:22

Layout Templates

12:22

What is responsive design?

1:26

What is responsive design?

1:26

Designing fluid layouts

22:30

Designing fluid layouts

22:30

Creating Breakpoints

19:02

Creating Breakpoints

19:02

SEO and Accessibility

10:22

SEO and Accessibility

10:22

Site and Page settings

6:57

Site and Page settings

6:57

Analytics

2:45

Analytics

2:45

CMS References

3:47

CMS References

3:47

5 Hidden Design Features

2:22

5 Hidden Design Features

2:22

CMS Canvas Sorting

4:04

CMS Canvas Sorting

4:04

Drafts

1:44

Drafts

1:44

10 Framer Shortcuts to Supercharge your Productivity

1:54

10 Framer Shortcuts to Supercharge your Productivity

1:54

Scale Tool (K)

3:32

Scale Tool (K)

3:32

Selection Colors

0:57

Selection Colors

0:57

What is the Framer CMS?

2:45

What is the Framer CMS?

2:45

Understanding CMS Collections, Items & Fields

5:51

Understanding CMS Collections, Items & Fields

5:51

CMS Pages & Dynamic Content

8:31

CMS Pages & Dynamic Content

8:31

Utilizing Collection Lists in Framer

9:17

Utilizing Collection Lists in Framer

9:17