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.

4 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:

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?

1 Like

@Vincent Hi Vincent!
Same question as Matteo. How do you disable scroll until animation is complete and then snap content to scroll again over the animation?

Hey, Matteo! You will have to add the display settings within the interaction.

Step-1 : Adding display none to the sections below the concerned section as display none in the “initial state”

Step-2 then making it visible after the last step in the animation.

The gist is that you will have to add these two steps in the animation you are looking to disable scroll for

Hi!
I’m trying to achieve this effect too on webflow but even though reading all your answers, and all the people happily replying about it, I’m really having difficulties wrapping my head around it. For now I’ve been able to achieve this effect by dividing the websiste in sections and by setting all of 'em on fixed position and then having them going 0-100% opacity with simple interactions. I added space to let the user scroll with a empty section, long about 2000px.

Is there a smarter way to block in the viewport that specific section till the whole animation complete? I didn’t really get that part about the display in interactions, can you be a little more specific?
i’m so sorry, buuut thanks in advance.