Framer University Lessons

Learn from my bite-sized Framer tutorials where I show you how to create stunning effects and animations on your websites.

Search all lessons…

Latest lesson

Framer Tutorial: Creating a 3D Text Scroll Animation

3D

SCROLL ANIMATION

Framer Tutorial: Creating a 3D Text Scroll Animation

Framer Tutorial: Creating a 3D Text Scroll Animation

Framer Tutorial: Creating a 3D Text Scroll Animation

Framer Tutorial: Creating a 3D Text Scroll Animation

Framer Tutorial: Creating a 3D Text Scroll Animation

All lessons

Framer Tutorial: Creating a Comment Section

CODE COMPONENT

FRAMER POWER-UP

Framer Tutorial: Creating a Comment Section

Framer Tutorial: Creating a Comment Section

Framer Tutorial: Creating a Comment Section

Framer Tutorial: Creating a Comment Section

Framer Tutorial: Creating a Comment Section

Framer 3D Transforms for Beginners (Crash Course)

3D WEBSITE

TRANSFORMS

Framer 3D Transforms for Beginners (Crash Course)

Framer 3D Transforms for Beginners (Crash Course)

Framer 3D Transforms for Beginners (Crash Course)

Framer 3D Transforms for Beginners (Crash Course)

Framer 3D Transforms for Beginners (Crash Course)

Framer for Beginners: Responsive Navbar From Scratch

RESPONSIVE SITE

NAVBAR

Framer for Beginners: Responsive Navbar From Scratch

Framer for Beginners: Responsive Navbar From Scratch

Framer for Beginners: Responsive Navbar From Scratch

Framer for Beginners: Responsive Navbar From Scratch

Framer for Beginners: Responsive Navbar From Scratch

Building a Framer Scroll Animation From Scratch

RAW PROCESS

SCROLL EFFECTS

Building a Framer Scroll Animation From Scratch

Building a Framer Scroll Animation From Scratch

Building a Framer Scroll Animation From Scratch

Building a Framer Scroll Animation From Scratch

Building a Framer Scroll Animation From Scratch

Framer Scroll Animations: The Easiest Technique in 13 Minutes

SCROLL ANIMATION

STICKY POSITIONING

Framer Scroll Animations: The Easiest Technique in 13 Minutes

Framer Scroll Animations: The Easiest Technique in 13 Minutes

Framer Scroll Animations: The Easiest Technique in 13 Minutes

Framer Scroll Animations: The Easiest Technique in 13 Minutes

Framer Scroll Animations: The Easiest Technique in 13 Minutes

Framer for Beginners: Avoid the #1 Rookie Mistake

BEGINNER

RESPONSIVE SITE

Framer for Beginners: Avoid the #1 Rookie Mistake

Framer for Beginners: Avoid the #1 Rookie Mistake

Framer for Beginners: Avoid the #1 Rookie Mistake

Framer for Beginners: Avoid the #1 Rookie Mistake

Framer for Beginners: Avoid the #1 Rookie Mistake

Found a Secret Way to Create Like Buttons Without Code

LIKE BUTTON

DATABASE

Found a Secret Way to Create Like Buttons Without Code

Found a Secret Way to Create Like Buttons Without Code

Found a Secret Way to Create Like Buttons Without Code

Found a Secret Way to Create Like Buttons Without Code

Found a Secret Way to Create Like Buttons Without Code

I Taught Framer Website Animations to a Subscriber

COMPONENTS

INTERACTIONS

ANIMATIONS

I Taught Framer Website Animations to a Subscriber

I Taught Framer Website Animations to a Subscriber

I Taught Framer Website Animations to a Subscriber

I Taught Framer Website Animations to a Subscriber

I Taught Framer Website Animations to a Subscriber

Framer Tutorial: Creating the Apple Vision Pro Scroll Animation

SCROLL ANIMATION

CODE OVERRIDE

Framer Tutorial: Creating the Apple Vision Pro Scroll Animation

Framer Tutorial: Creating the Apple Vision Pro Scroll Animation

Framer Tutorial: Creating the Apple Vision Pro Scroll Animation

Framer Tutorial: Creating the Apple Vision Pro Scroll Animation

Framer Tutorial: Creating the Apple Vision Pro Scroll Animation

Framer Tutorial: Creating Custom Web Cursors (No-Code)

CUSTOM CURSOR

CURSOR ANIMATION

Framer Tutorial: Creating Custom Web Cursors (No-Code)

Framer Tutorial: Creating Custom Web Cursors (No-Code)

Framer Tutorial: Creating Custom Web Cursors (No-Code)

Framer Tutorial: Creating Custom Web Cursors (No-Code)

Framer Tutorial: Creating Custom Web Cursors (No-Code)

Framer Tutorial: Adding Smooth Scroll To Your Website

CODE COMPONENT

SCROLL EFFECT

Framer Tutorial: Adding Smooth Scroll To Your Website

Framer Tutorial: Adding Smooth Scroll To Your Website

Framer Tutorial: Adding Smooth Scroll To Your Website

Framer Tutorial: Adding Smooth Scroll To Your Website

Framer Tutorial: Adding Smooth Scroll To Your Website

Framer Tutorial: Making The AirPods Pro Scroll Animation

CODE OVERRIDE

SCROLL ANIMATION

Framer Tutorial: Making The AirPods Pro Scroll Animation

Framer Tutorial: Making The AirPods Pro Scroll Animation

Framer Tutorial: Making The AirPods Pro Scroll Animation

Framer Tutorial: Making The AirPods Pro Scroll Animation

Framer Tutorial: Making The AirPods Pro Scroll Animation

Framer Tutorial: Creating A Galaxy Button Animation

COMPONENT

CODE OVERRIDE

Framer Tutorial: Creating A Galaxy Button Animation

Framer Tutorial: Creating A Galaxy Button Animation

Framer Tutorial: Creating A Galaxy Button Animation

Framer Tutorial: Creating A Galaxy Button Animation

Framer Tutorial: Creating A Galaxy Button Animation

Framer Tutorial: Turn Your Website Into A Digital Store

ECOMMERCE

OVERLAYS

Framer Tutorial: Turn Your Website Into A Digital Store

Framer Tutorial: Turn Your Website Into A Digital Store

Framer Tutorial: Turn Your Website Into A Digital Store

Framer Tutorial: Turn Your Website Into A Digital Store

Framer Tutorial: Turn Your Website Into A Digital Store

text cycle thumbnail

COMPONENTS

VARIANTS

Framer Tutorial: Creating A Text Cycle Animation Loop

text cycle thumbnail

Framer Tutorial: Creating A Text Cycle Animation Loop

text cycle thumbnail

Framer Tutorial: Creating A Text Cycle Animation Loop

text reveal tutorial thumbnail

STICKY POSITIONING

SCROLL VARIANT

Framer Tutorial: Creating A Text Reveal Scroll Animation

text reveal tutorial thumbnail

Framer Tutorial: Creating A Text Reveal Scroll Animation

text reveal tutorial thumbnail

Framer Tutorial: Creating A Text Reveal Scroll Animation

3d hover in framer tutorial thumbnail

CODE OVERRIDE

3D

Framer Tutorial: Creating A 3D Hover Effect

3d hover in framer tutorial thumbnail

Framer Tutorial: Creating A 3D Hover Effect

3d hover in framer tutorial thumbnail

Framer Tutorial: Creating A 3D Hover Effect

Building 3D Websites With Spline and Framer (No-Code)

3D

SPLINE

Building 3D Websites With Spline and Framer (No-Code)

Building 3D Websites With Spline and Framer (No-Code)

Building 3D Websites With Spline and Framer (No-Code)

Building 3D Websites With Spline and Framer (No-Code)

Building 3D Websites With Spline and Framer (No-Code)

scroll progress bar thumbnail

PROGRESS BAR

CODE OVERRIDE

Framer Tutorial: Creating Scroll Progress Bars

scroll progress bar thumbnail

Framer Tutorial: Creating Scroll Progress Bars

scroll progress bar thumbnail

Framer Tutorial: Creating Scroll Progress Bars

fixed footer thumbnail

FOOTER

FIXED POSITIONING

Framer Tutorial: Creating Fixed Footers (New Trend)

fixed footer thumbnail

Framer Tutorial: Creating Fixed Footers (New Trend)

fixed footer thumbnail

Framer Tutorial: Creating Fixed Footers (New Trend)

Framer Overlays: Creating Dropdown Menus And Tooltips thumbnail

FRAMER UPDATE

OVERLAYS

Framer Overlays: Creating Dropdown Menus And Tooltips

Framer Overlays: Creating Dropdown Menus And Tooltips thumbnail

Framer Overlays: Creating Dropdown Menus And Tooltips

Framer Overlays: Creating Dropdown Menus And Tooltips thumbnail

Framer Overlays: Creating Dropdown Menus And Tooltips

Framer Tutorial: Creating Smooth Website Loading Animations

COMPONENTS

INTERACTIONS

Framer Tutorial: Creating Smooth Website Loading Animations

Framer Tutorial: Creating Smooth Website Loading Animations

Framer Tutorial: Creating Smooth Website Loading Animations

Framer Tutorial: Creating Smooth Website Loading Animations

Framer Tutorial: Creating Smooth Website Loading Animations

Recreating The Apple Siri Website

WEBSITE REBUILD

STICKY POSITIONING

Recreating The Apple Siri Website with Framer

Recreating The Apple Siri Website

Recreating The Apple Siri Website with Framer

Recreating The Apple Siri Website

Recreating The Apple Siri Website with Framer

Website Language Switcher With AI (Framer No-Code)

FRAMER UPDATE

SITE LOCALIZATION

Website Language Switcher With AI (Framer No-Code)

Website Language Switcher With AI (Framer No-Code)

Website Language Switcher With AI (Framer No-Code)

Website Language Switcher With AI (Framer No-Code)

Website Language Switcher With AI (Framer No-Code)

New Apple Watch Website with Framer (No-Code)

WEBSITE REBUILD

SCROLL ANIMATION

New Apple Watch Website with Framer (No-Code)

New Apple Watch Website with Framer (No-Code)

New Apple Watch Website with Framer (No-Code)

New Apple Watch Website with Framer (No-Code)

New Apple Watch Website with Framer (No-Code)

WEBSITE REBUILD

ANIMATIONS

iPhone 15 Pro Website with Framer (No-Code)

iPhone 15 Pro Website with Framer (No-Code)

iPhone 15 Pro Website with Framer (No-Code)

Waitlist Site With Framer + Airtable

WAITLIST SITE

FRAMER + AIRTABLE

Waitlist Site With Framer + Airtable (FREE & No-Code)

Waitlist Site With Framer + Airtable

Waitlist Site With Framer + Airtable (FREE & No-Code)

Waitlist Site With Framer + Airtable

Waitlist Site With Framer + Airtable (FREE & No-Code)

parallax tutorial thumbnail

Scroll speed

Parallax

Framer Tutorial: No-Code Parallax Effect

parallax tutorial thumbnail

Framer Tutorial: No-Code Parallax Effect

parallax tutorial thumbnail

Framer Tutorial: No-Code Parallax Effect

scroll zoom animation thumbnail

Scroll transform

Advanced

Framer Tutorial: Advanced Scroll Zoom Animation

scroll zoom animation thumbnail

Framer Tutorial: Advanced Scroll Zoom Animation

scroll zoom animation thumbnail

Framer Tutorial: Advanced Scroll Zoom Animation

website tempalte thumbnail

Template

Personal

Build Your Personal Website With My Framer Template

website tempalte thumbnail

Build Your Personal Website With My Framer Template

website tempalte thumbnail

Build Your Personal Website With My Framer Template

Framer AI thumbnail

AI

Website generator

Framer Tutorial: Generate A Live Website With AI

Framer AI thumbnail

Framer Tutorial: Generate A Live Website With AI

Framer AI thumbnail

Framer Tutorial: Generate A Live Website With AI

Framer input component thumbnail

Components

Alerts

Framer Tutorial: How To Use The Input Component

Framer input component thumbnail

Framer Tutorial: How To Use The Input Component

Framer input component thumbnail

Framer Tutorial: How To Use The Input Component

curved carousel thumbnail

Scroll variant

Sticky positioning

Framer Tutorial: No-Code Animated Curved Carousel

curved carousel thumbnail

Framer Tutorial: No-Code Animated Curved Carousel

curved carousel thumbnail

Framer Tutorial: No-Code Animated Curved Carousel

Framer best practices thumbnail

Checklist

10 Things To Do Before Publishing a Framer Website

Framer best practices thumbnail

10 Things To Do Before Publishing a Framer Website

Framer best practices thumbnail

10 Things To Do Before Publishing a Framer Website

Figma to Framer thumbnail

Figma

Framer

Go From Figma to Live Website in 20 Minutes

Figma to Framer thumbnail

Go From Figma to Live Website in 20 Minutes

Figma to Framer thumbnail

Go From Figma to Live Website in 20 Minutes

200 IQ

Scroll transform

Framer Tutorial: No-Code 3D Tilted Scrolling for Your Website

Framer Tutorial: No-Code 3D Tilted Scrolling for Your Website

Framer Tutorial: No-Code 3D Tilted Scrolling for Your Website

advanced scroll animation thumbnail

Scroll transform

Sticky positioning

Framer Tutorial: Advanced Scroll Animation

advanced scroll animation thumbnail

Framer Tutorial: Advanced Scroll Animation

advanced scroll animation thumbnail

Framer Tutorial: Advanced Scroll Animation

Tesla website in Framer thumbnail

Code overrides

Framer Tutorial: How To Make A Tesla Style Website in Framer

Tesla website in Framer thumbnail

Framer Tutorial: How To Make A Tesla Style Website in Framer

Tesla website in Framer thumbnail

Framer Tutorial: How To Make A Tesla Style Website in Framer

no-code scroll animation thumbnail

Scroll transform

Exploitation

Framer Tutorial: How To Create A No-Code Scroll Animation

no-code scroll animation thumbnail

Framer Tutorial: How To Create A No-Code Scroll Animation

no-code scroll animation thumbnail

Framer Tutorial: How To Create A No-Code Scroll Animation