How to Block Scrolling During the Website's Preloader in Framer

How to Block Scrolling During the Website's Preloader in Framer

  • 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.

image of Nandi Muzsik

Posted by

Nandi

loading transition in Framer
loading transition in Framer
loading transition in Framer
  • Framer Tutorial: Creating Smooth Website Loading Animations

    Related Lesson

    Framer Tutorial: Creating Smooth Website Loading Animations

    Framer Tutorial: Creating Smooth Website Loading Animations

    Related Lesson

    Framer Tutorial: Creating Smooth Website Loading Animations

    Framer Tutorial: Creating Smooth Website Loading Animations

    Related Lesson

    Framer Tutorial: Creating Smooth Website Loading Animations

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.)

Custom Code interface for website development, showing CSS snippet to hide body overflow

The code in the end of <head> tag.

Custom Code interface for website development, showing CSS snippet to hide body overflow

The code in the end of <head> tag.

Custom Code interface for website development, showing CSS snippet to hide body overflow

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.

Custom Code interface showing CSS and JavaScript snippets for managing page overflow during loading transition

The code in the end of <body> tag.

Custom Code interface showing CSS and JavaScript snippets for managing page overflow during loading transition

The code in the end of <body> tag.

Custom Code interface showing CSS and JavaScript snippets for managing page overflow during loading transition

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!

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

More posts

  • Neon purple 'Smooth Scroll' button with Component logo icon

    How to Add Smooth Scroll to Your Framer Website

    Guide

    Neon purple 'Smooth Scroll' button with Component logo icon

    How to Add Smooth Scroll to Your Framer Website

    Guide

    Neon purple 'Smooth Scroll' button with Component logo icon

    How to Add Smooth Scroll to Your Framer Website

    Guide

  • custom cursor in Framer

    How To Create A Custom Cursor In Framer

    Guide

    custom cursor in Framer

    How To Create A Custom Cursor In Framer

    Guide

    custom cursor in Framer

    How To Create A Custom Cursor In Framer

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback