Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Framerjs: The complete course
Introduction to the course
Welcome to the course (1:32)
What is framer and what can you do with it (4:28)
Using Framerjs for Mac (7:17)
Framer Studio vs Framer JS
Getting ready to start your project
Prepare your assets to be FramerJS ready (5:36)
Adding images to your projects (10:23)
Adding text to your compositions, the easy and fast way (3:36)
Previewing your projects (5:39)
Previewing your designs in an Android device
Sharing your projects with your team or clients (2:31)
Sketch, Photoshop and Framer (10:53)
The Foundations and Components of framer
Learn how to easily and quickly animate (8:14)
Capturing user actions (6:12)
Improve prototyping speed by creating predefined states (8:35)
Adding scroll behaviour to your prototype and how to react to it (4:29)
The new scrolling component (10:45)
Curves and animations, all you need to know (6:47)
Working with the keyboard (5:32)
Dragging layers and how to interact with them (6:47)
Creating a draggable slider using the Slider Component (11:36)
Using your layers faster (2:55)
Using custom events in your prototypes (6:38)
Animating colors and transitions (3:47)
Get to know the Color object and utilities (6:24)
Correct bracket usage in Framer
Understanding your prototypes
The Web Inspector (4:07)
The console and how to see advanced stuff in your prototype (8:33)
Inspecting your layers to have everything under control (8:36)
Understanding errors and how to solve them (5:10)
Using the code highlighter to overview your code (1:46)
Framer Modules and Libraries
What is a module and how you can use it (5:57)
Creating a reusable module for your prototypes (12:22)
Creating and extending your module for your designs (6:08)
Importing libraries (6:52)
Adding inputs to your prototypes (10:15)
Use Google Fonts in your prototypes (8:14)
Free Framer modules to increase your productivity
Animating SVG (7:34)
Step by step advanced complete prototypes
Loading and presenting a user message (8:10)
Photo editor and the draggable controller (9:49)
Working with a login form (10:24)
Creating a carousel of images (16:49)
Using the page component to navigate through different sections of your app (8:12)
Adding interaction to a website (6:58)
Exercises to challenge yourself
Gallery lightbox exercise proposal (1:53)
Gallery lightbox solution (9:33)
Modular sliders inside scrolling page challenge explanation (1:29)
Creating the sliders with page indicators (15:08)
Moving sliders inside a scrolling area (8:30)
Creating a class to make it reusable (16:36)
Modularizing the class to make it available in our prototypes (15:54)
Menu that disappears on scroll and appears back (1:24)
How to react to scroll events properly with a menu (15:34)
Create a smiley color picker challenge (0:37)
Smiley with color picker step by step explanation (7:53)
Working with Virtual Reality VR
Introduction to Framer and Virtual Reality (3:47)
Adding images to the VR environment (3:38)
Working with VR (9:09)
Interacting in Virtual Reality with Framer (10:47)
Improving and polishing VR interactions (4:39)
Thank you and questions (1:11)
Free FramerJS
When to use the free Framer JS library
Setting up your machine with the required components (5:49)
How and where to edit your prototype (3:05)
Adding images to your prototype (2:32)
Importing images from Sketch (5:56)
Teach online with
Adding scroll behaviour to your prototype and how to react to it
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock