Warning: Layout display was forced before the page was fully loaded

Hi.

The page code is loaded in a strict order, in accordance with the placement of code and connected scripts and styles.
The next element is loaded only after the previous but not at the same time.

Looks like this:

1. HTML/CSS (you see static design)
2. Start animation Javascript (you see blink)
3. CSS animation action (you see animation action).

This is the expected behavior of the work of animation.

But you can make it work with CSS for each animated addon.
List IDs in CSS of all animated addons on first screen.

Example (for Fade effects)

#sppb-addon-1698567682193,
#sppb-addon-1698567682194,
#sppb-addon-1698567682195 {
    opacity: 0;
}

but if i use it for the Addon "Button" the Button dissapears after the animation has finished.

Hi @BOFHJunior .

This is not related to an addon, but depends on the type of animation. My example works with animation effects which have 100% key containing opacity. These are all types of Fade effects.

But if, for example, ZoomIn effect is used, this will not work by default, since ZoomIn animation does not have a 100% key .

This is what I mean. This is a ZoomIn animation from the box.

@-webkit-keyframes zoomIn {
    from {
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3);
    }
    50% {
        opacity:1;
    }
}
@keyframes zoomIn {
    from {
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3);
    }
    50% {
        opacity:1;
    }
}

As you can see there is no 100% key. Only 50% key.

To solve the problem, you need to copy all this animation, add 100% key to it and place it after the code for your addon.

Something like this

/*Code for addon*/
#sppb-addon-xxxxxxxxxxxxx {
    opacity: 0;
}
/*Corrected animation*/
@-webkit-keyframes zoomIn {
    from {
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3);
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}
@keyframes zoomIn {
    from {
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3);
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}

Hi @Rashida. It would be great if you shared this topic to the developers.

This is an old problem that does not allow the use of animation on the first screen (in Firefox) without additional skills.

Hello Pavel,
thank you for your detailed explanation. I didn't understood everything especially this 100% key thing but i think i understood the most important thing.

I saw now, that i use the Bouncy Animation for the Button addon: https://prnt.sc/0eFsz_8ZIAKb

I changed it to Fade and added the ID to my custom.css and it works.

@ Rashida

Please take a look with the development team to solve this issue.
This happens when using the Animations "Zoom" and "Bounce" and also with Interaction "While Scrolling Into View".

@ Pavel

For your information. This behavior happens on every page using these types of animations, not only the first one. :-(((

I didn't understood everything especially this 100% key

Hi. It is about this parts of code, that are not exist in the code from the box

For your information. This behavior happens on every page using these types of animations, not only the first one. :-(((

I did not talk about the first page, but about the first screen. The first screen is the upper part of any page that is loaded first in the visibility of your monitor.

Ahh now i understand it better.

Thx for the clarification, i mixed page and screen.

@ Rashida

Any Update here?

@ Rashida

Any Update here?

@ Rashida

Any Update here?

@ Rashida

Any Update here?