Streaming live at 10am (PST)

Disable scroll until animation is completed


#1

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?


#2

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.


#3

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?


#4

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.