Scrolling Table of Contents with Framer Motion
In this video, we'll create an animated table of contents sidebar for a blog article.
💾 Starter code: https://github.com/Built-With-Code/an...
⏭️ Watch This Next: • Animated custom scrollbar with Framer...
📱 Follow online: / built_with_code
Have a question about anything in this video? Drop it in the comments!
⏰ Timecodes ⏰
0:00 - Intro + Preview
0:15 - Starter code
0:21 - Table of Contents UI
3:22 - Scroll progress
4:47 - Dataflow to sidebar
9:39 - Tracking scroll of each section
14:43 - Fixing sidebar duplicates
16:26 - Click section to scroll
18:15 - Hide sidebar at start and end
21:21 - Outro
-------------------------------
Welcome to Built With Code, a channel focused on intermediate/advanced frontend web development topics. Some of my favorite tools are Next.js, TailwindCSS, and Framer Motion. If you find value from the videos, a like and/or subscribe is much appreciated!