If you visit my personal landing page: https://whois.numericcitizen.me, pay attention to the banner at the top: it first appears, then disappears and then slides down.
The expected behaviour is to have the banner gently slide down… how do I fix that? I’m using the Reveal component. Here are the parameters:
Mmmmm… I made the change, in preview mode, see how it behaves in this video… you’ll that the banner shows up a fraction of a second before doing the animation.
the live site seems ok
No, it’s not. The image appears, then disappear and then the slide in occurs… I’m using ARC Browser…
try adding this to your page css window:
[data-reveal] {
visibility: hidden;
}
It’s a race going on for the javascript to kick in when the page loads. You elements in the reveal are not hidden until the js kicks in then the js hides them before commencing the animation.
This should work for you. @ben should probably re-visit the Reveal component, and make the elements start out as hidden in preview and publish.
Also the image in the banner loads slow with an empty cache, so maybe optimise the image, and also set the fetch priority to high.
same in safari Firefox and duckduck
what I see is who is numeric citizen left on the screen
The issue is real, “if” the connection is slow, or the order and speed of loading different elements differs, from browser to browser. Put a breakpoint in the inspector on the reveal element, and you will see that on initial load the banner is visible. It’s visible until the js loads and hides it before commencing the animation.
