Lesson Overview
Animation
Layout
Scroll Effects
Variants
Breakpoints
Transitions
Events
Variables
Code
AI
Embeds
3D
Performance
CMS
Accessibility
no.
description
topics
level
01
Nav + Flyout Menu
[17m]
Building the primary navigation bar and using variant transitions to create a flyout menu on hover.
Animation
Layout
Scroll Effects
Variants
Breakpoints
Transitions
02
Feature Carousel
[14m]
Using component variants to cycle between features in the feature carousel.
Animation
Layout
Variants
Breakpoints
Transitions
03
Fraud Animations
[18m]
Using appear animations to create the looping animations in the Fraud Overview section
Layout
Breakpoints
04
Scroll Carousel
[14m]
Using scroll animations to build the scrolling feature carousel
Animation
Layout
Scroll Effects
Breakpoints
Transitions
05
Pricing Component + Table
[19m]
Using variables to build the pricing table and pricing component
Layout
Variants
Breakpoints
Transitions
Variables
06
Border Gradients + Parallax Effects
[14m]
Polishing our site by adding animated border gradients and parallax floating discs
Animation
Scroll Effects
Variants
Transitions
Code
07
Code Overrides
[18m]
Using code overrides to augment our design and make parts of the site talk to each other.
Animation
Events
Code
08
Code Components
[22m]
Using AI to create custom code components like a background effect and a custom form.
Events
Variables
Code
AI
09
Animations with Rive
[14m]
An intro to interactive animations in Rive and how to integrate them with Framer
Animation
Variants
Transitions
Variables
Code
10
3D Animations with Spline
[14m]
An intro to creating interactive 3D scene with Spline and integrating them into Framer
Animation
Embeds
3D
Performance
11
CMS
[17m]
Working around some of the current limitations of Framer's CMS.
Layout
Variants
Variables
CMS
12
Integrations, Accessibility & Performance
[16m]
Add custom analytics, improve accessibility and troubleshoot performance issues.
Code
Embeds
Performance
CMS
Accessibility