Nested Components in Framer (Beginner Tutorial)
In this Framer Beginner Tutorial we're creating nested components to achieve next level stuff in Framer.
🔴 Working File: https://timgabe.com/resources/nested-...
Timecodes
0:00 - Introduction to the tutorial on creating nested components in Framer.
0:17 - Explaining the purpose of combining components.
0:53 - Starting the recreation of the tab component.
1:58 - Creating a hover state for the tab component.
2:59 - Initiating the image component creation.
3:50 - Adding a hover effect to the image component.
4:46 - Adjusting the shine effect on the image component.
6:10 - Recap of the components created: tab and image.
6:17 - Beginning the creation of the nested component.
7:49 - Recreating the tabs for the nested component.
9:01 - Adding shadows and adjusting the nested component's appearance.
10:03 - Creating the text field for the nested component.
11:50 - Duplicating and adjusting text fields for different tabs.
13:20 - Finalizing the nested component and creating variants.
13:45 - Adjusting the tabs for the nested component.
14:30 - Modifying the padding and radius of tabs.
15:01 - Setting up interactions between tabs and variants.
15:49 - Customizing the appearance for different tab states.
16:59 - Adjusting the image component within variants.
17:41 - Aligning the text with the corresponding tab.
18:00 - Wrapping text stacks into another stack for better control.
18:46 - Adjusting opacity for text stacks in different states.
19:22 - Final touches on the opacity settings for text variants.
19:53 - Demonstrating the final interactive nested component with tab selection.
On this page of the site you can watch the video online Nested Components in Framer (Beginner Tutorial) with a duration of hours minute second in good quality, which was uploaded by the user Tim Gabe 01 January 1970, share the link with friends and acquaintances, this video has already been watched 36,949 times on youtube and it was liked by 1 thousand viewers. Enjoy your viewing!
