Animated custom scrollbar with Framer Motion Layout Animations
In this video, we will create a custom animated scrollbar inspired by the Humane AI Pin website. We'll use layout animations from Framer Motion to power this.
💾 Starter code: https://github.com/Built-With-Code/cu...
⏭️ Watch This Next: • Apple-inspired dark mode scrolling animati...
Have a question about anything in this video? Drop it in the comments!
⏰ Timecodes ⏰
0:00 - Intro + Preview
0:21 - Starter code
1:00 - Set up React Context
4:23 - Create custom Section component
8:24 - Scroll tracking
13:27 - Create custom Scrollbar component
19:02 - Animating the scrollbar
21:14 - Mini scrollbar from each section
23:03 - Hiding the browser scrollbar
23:50 - 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!