Apple-inspired dark mode scrolling animation with Framer Motion
In this video, we are going to build a dark mode scrolling animation that is used on Apple's product pages. We will use Next.js, Tailwind, and Framer Motion to build this project.
Starter source code: https://github.com/Built-With-Code/fr...
TailwindCSS dark mode docs: https://tailwindcss.com/docs/dark-mode
Want more Apple-inspired projects? Checkout this playlist: • Apple-inspired projects
Thanks for watching!
TIMESTAMPS:
0:00 - Intro + Preview
0:47 - Starter code
1:18 - Site structure and content
10:22 - Using dark mode with TailwindCSS
12:50 - Creating Section component to abstract scroll tracking logic
14:54 - Setting up dark mode state
16:35 - Setting up scroll tracking with useScroll hook
19:50 - Adding transition properties
20:46 - Outro
-------------------------------
Welcome to Built With Code! On this channel, you'll find coding tutorials on how to create and build your next awesome coding project, including websites and web apps. We'll use advanced frameworks such as Next.js, GSAP, and Framer Motion, and a whole lot more. If that sounds like fun, SUBSCRIBE to the channel - it'd be much appreciated!