Streaming live at 10am (PST)

Scroll Preloader Help


#1

Hi this is the first time i’m making a preloader, so i’m sure I made a simple mistake.

I followed a tutorial but couldn’t find the wait till all items load button. The main issue is that the preloader does not show at all. It is supposed to be a scroll preloader.

Here is my public link: http://thechinacloset.webflow.io/possible-home2

and my readable link https://preview.webflow.com/preview/thechinacloset?preview=92e2931327ff70940335c184b9604369

Thanks,

Meghan


Here is my public share link: [http://thechinacloset.webflow.io/possible-home2]
(how to access public share link)


#2

The “wait for assets to load” check box is under the “Load” trigger type for interactions. Change to the load trigger and then setup the content interaction animations.

You could also make the preloader position fixed and z-index higher than the main content. Then use the load triggered interaction to animate it away to reveal the main content below once loaded.

Also note that load interactions may need to be viewed on the published site, due to assets already being loaded in the designer making the “wait for assets” time essentially 0 sec.


#3

Hi @matthewpmunger I changed the wait for assets to load, z-index, and made
it fixed. When i view it on published site it flashes for less than a
second. But I want to be able to scroll through away the preloader. Is
this a possibility?

Thank you so much for your help!!

Meghan


#4

Help me understand your intent.

You want a preloader or fullscreen section to be visible and un-scrollable? Then once all elements are loaded, the preloader section stays but it’s now possible to scroll down. Is that right?

If so you need to section elements. The first on should be set to 100vw width and 100vh height. Add a background image or color if you want and place all desired elements of the preloader inside this section.
The second section element should contain the remaining content for the page. On this element add a Load triggered interaction. Initial state should be to display none. The first step, after assets load, is to set the display to block. You can add a step at the beginning with wait time value if the load is faster than desired.


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.