🥳 Enjoy 3 months of Framer for free!
What are we building
Have a lot of content and want to guide your visitors easily through the different states. Let's create a table of content that highlights the area you are currently at.
#1 - Lots of content
In this case we have the first 4 chapters of a book. That means a lot of content. Let's try to build a Table of Content that shows your progress.
#2 - Create a sticky sidebar
Draw a rectangle and set position to Fixed. Once you've positioned the rectangle press CMD + Option + K to turn it into a component.
#3 - Styling your Table of Contents
Let's add some styling to your Table of contents. I've added a new component for my Chapter # so I could add a hover and active state. The active state makes highlighting your current scroll position much easier.
#4- Create link variables
Select your Chapter primary state and add a link variable. Make sure to turn on 'smooth scroll'.
#5- Setting up Scroll sections
To navigate towards the correct chapters we can use Scroll sections. I've added a #top and for every chapter a specific #chapter-x scroll section.
#6- Setting up the links
Now that you've created the scroll sections you can go back to your Table of Contents component and match every chapter to the correct scroll position. Check the video to see how to setup the linking.
#7- Linking works
Allright, linking works, unfortunately it doesn't show your active position yet.
#8- Create multiple variants
Let's fix that by adding multiple variants of your Table of Contents. In the video I already duplicated and set up the active states for Chapter 1 and 2, but will show how to change the values for the third and fourth variant.
#9- Add a Scroll variant effect
All that's left to do is create the effect that changes the variant based on it's scroll position. Select your Table of contents and add "effect". Choose the Scroll variant option. Make sure to change the variant multiple times by Adding sections.
👋 I hope you've enjoyed today's drop.