Use code
LAUNCH100
for 25% off
New to Framer? Learn the basics of Layout, Components and Motion.
*free
New to Framer? Learn the basics of Layout, Components and Motion.
*free
New to Framer? Learn the basics of Layout, Components and Motion.
$399
$299
-25%
Take your understanding of Framer to the next level by building a complete site from start to finish.
Ever thought about throwing your laptop out the window when using Framer? Me too.
Despite this, Framer has quickly become my favourite way to build websites - even as someone who codes. It's an incredibly powerful tool but there are frustratingly few resources out there about how to make full use of it.
Building something basic is easy. Building what you want is where things get tricky.
I built this course because I found most tutorials kinda inadequate. They show you how to build some flashy animation and then roll credits - never taking the time to make it responsive or figure out how it will interact with the rest of the page.
There was nothing that showed you all the little gnarly bits that come with making a complete, professional grade site.
To solve this problem, I came up with a fake SaaS company, Detax.
We build the Detax site from start to finish to show you how to take a site all the way to production.
The course consists of 12 lessons split across 3 modules and goes beyond just Framer. I'll show you how to use and integrate other tools, like Spline for 3d and Rive for more advanced animations.
What’s Framer?
I tried it out a few times
It's cool but I keep getting stuck
Made a basic site
I use Framer every week
I make sites for money
What’s Framer?
I tried it out a few times
It's cool but I keep getting stuck
Made a basic site
I use Framer every week
I make sites for money
Not gonna lie, it's fairly advanced. If you're just getting started with Framer, you might struggle (check out my beginner tutorials btw).
If you've started to bump up against the limits of what you can do, this is for you!
Build
[Lessons 1 - 6]
Learn tactics for creating complex layouts by building a production grade website from scratch.
By the end of this module, you’ll have a suite of dynamic and high-quality components you can remix into your own sites.
Craft
[Lessons 7 - 10]
Push beyond the limits of Framer’s interface to create stunning interactive visuals.
By the end of this module, you’ll have the tools to build custom components that you could even sell on Framer’s marketplace.
Scale
[Lessons 11 & 12]
Manage complexity at scale by learning strategies for creating large content driven sites.
By the end of this module, you’ll understand what it takes to launch a professional website to production.
build
craft
scale
Build
[Lessons 1 - 6]
Learn tactics for creating complex layouts by building a production grade website from scratch.
By the end of this module, you’ll have a suite of dynamic and high-quality components you can remix into your own sites.
Craft
[Lessons 7 - 10]
Push beyond the limits of Framer’s interface to create stunning interactive visuals.
By the end of this module, you’ll have the tools to build custom components that you could even sell on Framer’s marketplace.
Scale
[Lessons 11 & 12]
Manage complexity at scale by learning strategies for creating large content driven sites.
By the end of this module, you’ll understand what it takes to launch a professional website to production.
build
craft
scale
Module 1: Build
[Lessons 1 - 6]
Learn tactics for creating complex layouts by building a production grade website from scratch.
By the end of this module, you’ll have a suite of dynamic and high-quality components you can remix into your own sites.
Craft
[Lessons 7 - 10]
Push beyond the limits of Framer’s interface to create stunning interactive visuals.
By the end of this module, you’ll have the tools to build custom components that you could even sell on Framer’s marketplace.
Scale
[Lessons 11 & 12]
Manage complexity at scale by learning strategies for creating large content driven sites.
By the end of this module, you’ll understand what it takes to launch a professional website to production.
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
01
Nav + Flyout Menu
[17m]
Building the primary navigation bar and using variant transitions to create a flyout menu on hover.
02
Feature Carousel
[14m]
Using component variants to cycle between features in the feature carousel.
03
Fraud Animations
[18m]
Using appear animations to create the looping animations in the Fraud Overview section
04
Scroll Carousel
[14m]
Using scroll animations to build the scrolling feature carousel
05
Pricing Component + Table
[19m]
Using variables to build the pricing table and pricing component
06
Border Gradients + Parallax Effects
[14m]
Polishing our site by adding animated border gradients and parallax floating discs
07
Code Overrides
[18m]
Using code overrides to augment our design and make parts of the site talk to each other.
08
Code Components
[22m]
Using AI to create custom code components like a background effect and a custom form.
09
Animations with Rive
[14m]
An intro to interactive animations in Rive and how to integrate them with Framer
10
3D Animations with Spline
[14m]
An intro to creating interactive 3D scene with Spline and integrating them into Framer
11
CMS
[17m]
Working around some of the current limitations of Framer's CMS.
12
Integrations, Accessibility & Performance
[16m]
Add custom analytics, improve accessibility and troubleshoot performance issues.
What’s in the box?
Lessons
12 video lessons
Lessons
12 video lessons
Lessons
12 video lessons
Template.framer
The complete Detax site template.
Template.framer
The complete Detax site template.
Template.framer
The complete Detax site template.
Starter.framer
Basic components, color and text styles.
Starter.framer
Basic components, color and text styles.
Starter.framer
Basic components, color and text styles.
Course_file.fig
14 pages of designs + diagrams
Course_file.fig
14 pages of designs + diagrams
Course_file.fig
14 pages of designs + diagrams
Hero.spline
Spline file with 3D hero animation
Hero.spline
Spline file with 3D hero animation
Hero.spline
Spline file with 3D hero animation
Animations.rive
Rive file with all 6 animations
Animations.rive
Rive file with all 6 animations
Animations.rive
Rive file with all 6 animations
Dan is an absolute magician when it comes to Framer, he's done stuff I didn't think could be done without code!
I got a sneak peek of this course and it seems really solid.
Josh W. Comeau
Creator of The Joy of React
This is the advanced course I have been looking for.
There are many courses teaching you the whats but rarely go over the whys… Not only Dan will cover the whys, but he lays them out in clear diagrams explaining why components need to be structured in certain ways to achieve the effects.
Jun
Student
Advanced Framer is precisely the training I was seeking.
Not only does it surpass the basics, transforming a simple Framer site into something truly exceptional with in-depth tips and tricks from Dan, but it also extends its reach beyond Framer, introducing other valuable tools.
Alexis
Student
If you're looking to level up your Framer skills, learn vastly more efficient approaches while peeking under the hood of code components and overrides, this is the best course around.
Dan guides you through the syllabus using diagrams and visual-aids to leave you feeling like fuzzy concepts have suddenly become crystal clear.
Dan
Student
Not only is Dan a Framer expert... he's also an elite teacher and has a real gift for making complex topics feel simple.
He's the perfect person to teach advanced Framer workflows.
Micheal Riddering
Creator of Figma Academy
If you're looking to level up your Framer skills, learn vastly more efficient approaches while peeking under the hood of code components and overrides, this is the best course around.
Dan guides you through the syllabus using diagrams and visual-aids to leave you feeling like fuzzy concepts have suddenly become crystal clear.
Dan
Student
Dan is the best. It’s crazy how good he is actually. Even though I haven’t taken it, his course is probably also very good.
Jorn van Dijk
CEO of Framer
I loved doing more "complex" components with clear explanations, especially thanks to Dan's diagrams and tips & tricks.
I'd add that I was also able to learn advanced techniques with Framer coupled with tools like Rive, Spline, CMS and analytics.
Vincent
Student
I took Traf's course on Framer Fundamentals.
This definitely fits as the next course to take and is worth the investment.
Ben
Student
Not only is Dan a Framer expert... he's also an elite teacher and has a real gift for making complex topics feel simple.
He's the perfect person to teach advanced Framer workflows.
Micheal Riddering
Creator of Figma Academy
If you're looking to level up your Framer skills, learn vastly more efficient approaches while peeking under the hood of code components and overrides, this is the best course around.
Dan guides you through the syllabus using diagrams and visual-aids to leave you feeling like fuzzy concepts have suddenly become crystal clear.
Dan
Student
Dan is the best. It’s crazy how good he is actually. Even though I haven’t taken it, his course is probably also very good.
Jorn van Dijk
CEO of Framer
I loved doing more "complex" components with clear explanations, especially thanks to Dan's diagrams and tips & tricks.
I'd add that I was also able to learn advanced techniques with Framer coupled with tools like Rive, Spline, CMS and analytics.
Vincent
Student
I took Traf's course on Framer Fundamentals.
This definitely fits as the next course to take and is worth the investment.
Ben
Student
Dan is the expert you need to take your Framer skills to the next level.
Jorn van Dijk
CEO of Framer
Dan's Advanced Framer course has truly Advanced material, offering teachings beyond any other resource I've encountered. His extensive knowledge, coupled with a very clear teaching style, simplifies even the most challenging concepts effortlessly.
Dan’s breakdown of advanced concepts through perfectly crafted diagrams is a game changer.
Ben
Student
I loved doing more "complex" components with clear explanations, especially thanks to Dan's diagrams and tips & tricks.
I'd add that I was also able to learn advanced techniques with Framer coupled with tools like Rive, Spline, CMS and analytics.
Vincent
Student
Dan is the expert you need to take your Framer skills to the next level.
Jorn van Dijk
CEO of Framer
Dan's Advanced Framer course has truly Advanced material, offering teachings beyond any other resource I've encountered. His extensive knowledge, coupled with a very clear teaching style, simplifies even the most challenging concepts effortlessly.
Dan’s breakdown of advanced concepts through perfectly crafted diagrams is a game changer.
Ben
Student
I loved doing more "complex" components with clear explanations, especially thanks to Dan's diagrams and tips & tricks.
I'd add that I was also able to learn advanced techniques with Framer coupled with tools like Rive, Spline, CMS and analytics.
Vincent
Student
Who is this for?
It's aimed at people who want to use Framer in some professional capacity.
Freelancers
Take your skills to the next level and have the confidence to build anything your clients need.
Freelancers
Take your skills to the next level and have the confidence to build anything your clients need.
In house
Get the tools to produce a high-quality site for your business at a larger scale.
In house
Get the tools to produce a high-quality site for your business at a larger scale.
Startups
Grab attention with your landing page without spending months to build it.
Startups
Grab attention with your landing page without spending months to build it.
Portfolios
Stand out from the template crowd with a well-crafted personal portfolio.
Portfolios
Stand out from the template crowd with a well-crafted personal portfolio.
Yes, you'll need to fill out this form and we'll hook you up with a discount code.
Yeah, I'll just have to onboard your team manually. I'm going to add a link here but until then just email/DM me on twitter.
Sure, but it depends on your employer. There is a guide about that here.
It's hosted on Maven, a course platform designed primarily for cohort based courses.
No, it isn't. You are free to take the course at your leisure and you will never lose access. So ignore all the things on Maven that say cohort based.
There are about 3.5 hours of videos, but the information is quite dense. If you wanted to build everything, it would take about 1-2 weeks of spare time.
There are but they are completely optional.
No, you don't. There are two lessons where we talk about Code Components and Code Overrides that get quite code heavy. But I walk you through the basics and we use AI to do some coding for us.
Yes! We have a thriving Discord community where people share their work and I post monthly freebies.
You can ask for help in the course community where I'll be hanging out. Between me and the other course participants, we can figure it out.
Not really. As the name suggests, it can be quite advanced at times. You'll get the most out of the course if you've already played around with Framer.
I've yet to find someone who didn't learn anything. Plus, we don't just go deep into Framer in this course, I also teach you about other tools that integrate well with it like RIve and Spline.
Sure, not a problem. You will lose access to all the course assets though.
There already have been a few updates but I can't promise anything here because Framer is evolving so quickly. But I can promise you'll have access to any updates for the life of the course.
For as long as you want. The videos are not downloadable though, so you'll need to keep logging into Maven to see them.
Nope, but the people at Framer have been incredibly supportive.
Yes, you'll need to fill out this form and we'll hook you up with a discount code.
Yeah, I'll just have to onboard your team manually. I'm going to add a link here but until then just email/DM me on twitter.
Sure, but it depends on your employer. There is a guide about that here.
It's hosted on Maven, a course platform designed primarily for cohort based courses.
No, it isn't. You are free to take the course at your leisure and you will never lose access. So ignore all the things on Maven that say cohort based.
There are about 3.5 hours of videos, but the information is quite dense. If you wanted to build everything, it would take about 1-2 weeks of spare time.
There are but they are completely optional.
No, you don't. There are two lessons where we talk about Code Components and Code Overrides that get quite code heavy. But I walk you through the basics and we use AI to do some coding for us.
Yes! We have a thriving Discord community where people share their work and I post monthly freebies.
You can ask for help in the course community where I'll be hanging out. Between me and the other course participants, we can figure it out.
Not really. As the name suggests, it can be quite advanced at times. You'll get the most out of the course if you've already played around with Framer.
I've yet to find someone who didn't learn anything. Plus, we don't just go deep into Framer in this course, I also teach you about other tools that integrate well with it like RIve and Spline.
Sure, not a problem. You will lose access to all the course assets though.
There already have been a few updates but I can't promise anything here because Framer is evolving so quickly. But I can promise you'll have access to any updates for the life of the course.
For as long as you want. The videos are not downloadable though, so you'll need to keep logging into Maven to see them.
Nope, but the people at Framer have been incredibly supportive.
Taught by
Owner @Rectangle Labs, Framer Mentor
