How to Create a Scroll Progress Bar with Next.js and Framer Motion

🚀 In this step-by-step tutorial, you'll learn how to effortlessly create a scroll progress bar for your Next.js project using Framer Motion. This versatile component, once implemented, can be seamlessly integrated into any page of your project and customised with the help of CSS styling.
🔗 Access the starting GitHub link here: tutorials.emersonvisuals.com/...
🚀 Explore more tutorials at: tutorials.emersonvisuals.com
Timestamps:
0:00 - Introduction
0:30 - GitHub Link / Important Files
1:07 - Installing Framer Motion Package
1:38 - Creating ProgressBar Component with TSX/JSX
5:19 - Styling ProgressBar Component with CSS
7:02 - Adding ProgressBar Component to Home Page
7:58 - Additional Styling Options for ProgressBar Component
8:54 - Conclusion
Unleash your potential as a more creative developer. Thank you for watching! 💻✨"
#nextjstutorial #reacttutorial #framermotion #scrollprogressbar
The music used in this video is "City Of Angels" by LAKEY INSPIRED. You can find more of his music on his official RUclips channel: ruclips.net/channel/UCOmy...
This track is licensed under the Creative Commons Attribution 3.0 Unported "Share Alike" (CC BY-SA 3.0) License. You can read the full license here: creativecommons.org/licenses/...
The music is promoted by NCM goo.gl/fh3rEJ.

[@emersonvisuals]

Learn more about framer motion in react/nextJS projects by checking out my latest video here: ruclips.net/video/TQcXSK0k52s/видео.html

[@naksuy]

Pls how can I set the progress bar to display on the right🙏🙏.
I saw how you did both top and bottom and was really hoping you'd show 'right' 🥺 8:42

[@dinoDonga]

Hey hey. I basically built the same thing but ran into an issue. I added section snap scroll to my page. In order for snap scroll to work the container needs a fixed height in my case 100vh. Since this means that the entre thing fits inside the viewport the scroll progress is always at 100% and the bar is omnipresent. Any idea how to work around that?

[@emersonvisuals]

Hey there! I understand the issue you're facing. Indeed, when the container is set to 100vh for snap scrolling, it limits the page height, causing the scroll progress to always show 100%. One workaround is to adjust the document's height to be greater than 100vh, allowing users to scroll through the content. Alternatively, you could explore using a custom scroll progress bar that triggers based on scroll events rather than viewport height. This would provide a more accurate representation of the user's progress through the page. Let me know if you need further assistance or if you'd like to explore other solutions!

[@emersonvisuals]

If you have a live site of the issue you're facing, feel free to send it through and I can have a look for you if you need!