Introduction to the course
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
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
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
Free FramerJS
