Is there a way to prevent the page load animation from restarting when resizing the browser window in Webflow?

Published on
September 22, 2023

Yes, there is a way to prevent the page load animation from restarting when resizing the browser window in Webflow. By default, page load animations are triggered whenever the page is loaded or reloaded, including when the browser window is resized. However, you can use a custom code to prevent the animation from restarting during browser window resizing.

Here's how you can achieve this:

  1. Open your Webflow project and go to the Designer.
  2. Select the page where you want to disable the page load animation.
  3. Click on the "Settings" icon in the top-right corner of the Designer.
  4. In the page settings menu, go to the "Custom Code" tab.
  5. Under the "Head Code" section, paste the following CSS code:
<script>  $(window).on('resize', function(){    disableScrollAnimations();  });    function disableScrollAnimations() {    $('html').css('overflow', 'hidden');    setTimeout(function(){      $('html').css('overflow', '');    }, 500);  };</script>
  1. Save the changes and publish your site.

Now, when you resize the browser window, the page load animation will not restart. This is done by temporarily disabling the scroll animations during the resizing process and then re-enabling them after a short delay. The animation will still trigger when the page is initially loaded or reloaded.

By using this solution, you can ensure a smooth and uninterrupted user experience on your Webflow site, even when resizing the browser window.

Additional Questions:

  1. How can I add a page load animation in Webflow?
  2. Can I create custom animations in Webflow?
  3. What other customizations can I make using custom code in Webflow?