#6 Filtering a List of Content Without the CMS — Mastering Framer Code Overrides
In this bonus lesson, we will be building an advanced override for filtering the lesson plan. The override allows you to filter lessons based on tags without using a CMS. The tutorial explains the setup of components in Framer and covers three overrides: "with active tag," "clear filters," and "with lesson filtering." The tutorial demonstrates the implementation of these overrides, including handling active tags, updating the store, and toggling visibility using animation. Check out other advanced overrides courses available at www.advancedframer.com.
Starter File: https://framer.com/projects/new?dupli...
Finished File: https://framer.com/projects/new?dupli...
Companion File: https://www.figma.com/community/file/...
0:00 - Introduction and overview of the bonus lesson
0:03 - Explanation of the advanced override used on www.advancedframer.com site
0:09 - Demonstration of the lesson plan filter feature using tags
0:16 - Filter functionality without using a CMS
0:21 - Introduction to the components' setup in Framer
0:38 - Overview of the lesson list component and its structure
1:10 - Overview of the tag component and its states
1:36 - Introduction to the three overrides: with active tag, clear filters, and with lesson filtering
1:58 - Building the lesson filtering override
4:14 - Implementing the animate presence library for transitions
5:18 - Testing the functionality of the lesson filtering override
6:07 - Introducing the with active tag override
8:39 - Testing the functionality of the with active tag override
10:02 - Introducing the clear filters override
10:58 - Implementing the clear filters functionality
11:41 - Fixing the bug where no lessons are visible when no tags are selected
12:31 - Finalizing the lesson and thanking the viewers
🌞 Try Framer for free: https://framer.com
🎉 Follow on Twitter: / framer
💎 Join Community: https://www.framer.community