I was always curious why some websites that are heavy for content (have lot’s of animations, videos, pictures) have this preloading screen that first hides the main content.
does it allow the hidden content to load up while the animation on the preloading screen is playing?
in this case, how do you make sure that the content behind the loading screen finished loading before the entry animation finished playing?
Yes, if you create the interaction correctly, it will be visible and let all other content load “behind the scenes”…
The basis is that JavaScript (the language Webflow uses to create interactions) has a few ways to know when all the items in the page finished loading.
EG: DOMContentLoadedevent
We can bind any other function (thing that we want to do on the page) to this event
For example, we can tell the “loading animation” to reduce opacity until hidden at the moment the DOMContentLoadedevent happened.
Let’s translate this into Webflow:
We can create a ‘Page Load’ interaction:
hi there. thanks for the answer.
I understand the basics of animations.
what I am having trouble to understand is the following:
Let’s take this primitive example: non-os (webflow.io)
I don’t think that in this case it really plays some functional role. I think it is only made for entourage but with this example it is easier to understand the idea.
so the first loading screen with the blue loading bar would be that preloading animation while the rest of the website is loading behind.
when we create an animation for Page Load (When the page loaded), the first thing for us would be to animate the hidden section screen, right? The preloading screen could be a DIV Block with the position Absolute Z index 1 behind all the main area of the website while the main area of the website is the Relative SECTION block with the Z index 2 initially set to 0 opacity.
So according to your logic we just should set the animation for opacity of the SECTION block and once all the content on the section loaded the SECTION would appear above the DIV block and that loading bar would be covered by the main SECTION.
In this example it is easy because the loading bar animation is set to LOOP and it would repeat as many times and needed until the SECTION covers the DIV when the page finished loading. And it also easy because there is no transition between the screens. It is pretty primitive.
But how about the cases where the preloading animation loads only once for example a loading bar reaches from 0 to 100% only once, and after that a soft transition (for example the preloading DIV fades away and the main SECTION fades in) comes?
In this case you’d actually have to include both DIV and SECTION within one Interaction, correct? For example you choose that the SECTION appears AFTER the DIV disappears. so how could you make sure that the DIV’s animation reaches 100% only when the SECTION really finished loading?
Loading bar connected to actual page loading percentage is not possible with Webflow’s interactions. Only by adding Custom code.
Soft transition, hard transition, it is pretty much the same. You have a timeline in your animation in which you can do any transition you want.
It only need some logical planning and good execution.
I don’t think the hard transition and soft transition is the same. because if you are okay wit the hard transition between the LOADING screen and the MAIN screen you can just start animate the MAIN screen with (Page Load - When page finished loaded) and it will roughly cover the LOADING screen without any transition.
in this case you actually make sure that the MAIN screen appears when the page finished loading.
But if you want to have a soft transition you have to include the entrance and disappearing of the LOADING screen in the same interaction where the appearing of the MAIN section would happen only AFTER the LOADING section has finished its animation.
In this case a user would have to wait even for the LOADING screen to appear after the page finished loading so there would be just a blank screen until it appears.
