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?
I hope I could express myself clear.