Guide
- Custom code
- Preloader
Guide
- Custom code
- Preloader
Guide
- Custom code
- Preloader
How to Block Scrolling During the Website's Preloader in Framer
In this mini guide, I'll show a neat little trick that lets you block page scrolling while your website plays the smooth loading transition that you created according to this tutorial video.
Posted by
Nandi
Table of contents
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.)
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.)
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 code in the end of <head> tag.
The code in the end of <head> tag.
The code in the end of <head> tag.
<style>
body {
overflow: hidden;
}
</style><style>
body {
overflow: hidden;
}
</style><style>
body {
overflow: hidden;
}
</style>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.
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.
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 code in the end of <body> tag.
The code in the end of <body> tag.
The code in the end of <body> tag.
<script>
setTimeout(function() {
document.body.style.overflow = 'auto';
}, 3500); // Your loading transition's length in miliseconds.
</script><script>
setTimeout(function() {
document.body.style.overflow = 'auto';
}, 3500); // Your loading transition's length in miliseconds.
</script><script>
setTimeout(function() {
document.body.style.overflow = 'auto';
}, 3500); // Your loading transition's length in miliseconds.
</script>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!
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!
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!
