Streaming live at 10am (PST)

Disable scroll until animation is completed

Hey Webflowers,

As the title suggests, is there a way to disable scroll events until an interaction timeline is completed?

I want to disable the scroll until the animation timeline for my hero is completed. The hero includes some type.js animations. A set of timed interactions using Webflow interactions starts after this is completed. I want to disable scrolling until this is completed.

Site link here

Preview link here

As a second question, does anyone know why Webflow interactions immediately end if you switch browser tabs?

You can wrap everything that is not the hero into a div called .page-content, for example, and display:none this div until the animation completes, then display:box. If there’s nothing to scroll, users can’t scroll.

2 Likes

That was an extremely easy and very neat solution @Vincent thanks very much!

Another question, is there a way to skip animations in Webflow i.e., a skip animation button/link? Or even better, is there a way to only load the animations once on first page load, not on every subsequent page load?

If you consider your Hero like a giant modal window covering the viewport, you can:

  • skip the animation by having a skip button that will hide the modal and show the homepage
  • use a cookie to only show the modal when you want (check my cookie template http://cookie-template.webflow.io/ )
  • use CSS and HTML structure to prevent the scroll behind the modal using this HTML and CSS only technique http://luxiyalu.com/scrolling-on-overlay/ (I tested it, it works)

I reckon you’re maybe going to have to redo a lot of things but… it solves a lot of your problems at once.

Hi Vincent, what if I want to disable scroll until the animation in the first section is finished?
https://npbc.webflow.io/ this is the site link
preview: Preview

Thank you!

You can have two main sections under the body: the first, hero one, and everything else into another section underneath. With IX, you keep this second section simply hidden (display:none) until the animation is finished.

Thanks Vincent! it works now :slight_smile:

1 Like

hi Vincent. how would you make this working on on desktop only? I set the blocks that I need to appear in a few seconds on desktop. and I don’t need them to appear on mobile at all so I hi them on mobile completely. but seems like those blocks break through the animation even though they are set on mobile to hidden?..

That’s the IX you have to set for desktop only, too. Open the IX and in the first panel at the bottom you can deactivate it for devices.

Hi Vincent, the issue with wrapping the rest of the site content in a separate div and setting this to display:none is that, if you were using the loading animation as a pre-loader for when the site is loading, that content within that div won’t start loading until after the display:box has been activated (which will be after the animation is finished).

Is that correct?

Ali

Hi Vincent!

I’ve been trying to solve this, but I’m struggling. How do you implement what you are saying here?
How do you display none until the animation completes?