I recently shared a component and a full video tutorial where I showed you how to craft a beautiful loading animation for your Framer site. However, many of you asked for a loading component solution that also prevents page scrolling while the loading animation is displayed. Luckily, I was able to find a solution.
Block page scrolling during loading
What we need to do is tell the browser that while the loading is happening (which lasts for a fixed duration of around 3.5 seconds in this demo), the page shouldn't be scrollable, and after 3.5 seconds, it should be scrollable again.
We can control the page's scrollability by setting the body's overflow to hidden.
This is what we'll achieve by inserting a code snippet at the end of the head tag. (You can do this in the site settings, at the bottom of the general tab.)
The <head> code:
This will disable the ability to scroll when we load the website. So, that's our starting point.
Turning scrollability back on after 3.5 seconds
To adjust this overflow from "hidden" back to auto (auto means that the website is scrollable) we need to add another snippet, but now, we will insert it into the end of body tag.
The <body> code:
This is a simple script that sets overflow back to auto after the time we determine, which in this case is 3500 milliseconds, or 3.5 seconds.
Adjust the number to match your loading animation's duration.
Conclusion
And there you have it! Following this guide, you should now understand how to stop the page scroll during your website's loading animation in Framer.
Be sure to adjust the timer to line up with your own loading animation's duration.
Stay tuned for more practical tips and tricks to polish your Framer projects. Keep iterating and, most importantly, have fun building!
