Having an issue with a home page displaying a second time after a short delay. Using snippets for header, menu and footer. Works ok as standalone html in the browser. Issue occurs through MAMP and Kirby. Thanks for any help.
What exactly do you mean with “a second time”? Could you maybe make a short screencast?
Will try to get a visual.
Site should begin with a large background image, and then text floats slowly into view. Currently the image and text show for about 3 seconds, disappear and then behaves as it should with the image and text. Text ultimately becomes stationary and everything works well. Behaves as if the home page is being called twice, but unclear why. Maybe I need a debugging method?? Like Kirby though.
By the sounds of it, this seems like an issue with your javascript being loaded after those 3 seconds you mention, and then creating the animation.
Try to inspect your website with the inspector tools and look at the network tab to see when your js is loaded and if it matches the behavior you’re seeing.
I had a similar issue recently, which was due to a javascript issue.
Yep, definitely a JS issue.
Browsers try to render a web page as soon as possible. JS code should block page rendering if you don’t use the async attribute and place the <script src="…"></script> tags before your content or in the page’s <head>, but they won’t if you place them after the content (which is generally a good practice).
When building an animation that animates your content in, the challenge is to have content that is either hidden or has the state of the start of the animation (not the end, normal state), but it can also be a problem in case your JavaScript does not load correctly (which can happen for any number of reasons, including a slow network), because your content will be unreadable.
Not sure there’s a great solution for that. In a previous project I tried adding the initial state styles with JS (by adding a class on the body, using JS code directly in the <head>), and registering a timeout after which if the animation had not started, I would remove that initial state class to restore a readable layout. This approach (with a setTimeout) might be a bit brittle, but it’s better than not testing the no-JS and slow-JS cases.
2 Likes
Thank you for your responses. I am attaching a screen shot of my network output hoping that if it is a js problem it will be apparent to some of you who are more experienced. I apologize if this isn’t a Kirby issue. Just happened to come across during my merging of existing files with Kirby.
Thanks again for your support.
That’s a lot of JavaScript files 
It sure looks like most of them are taking a couple seconds to load, which means your animations won’t start before that time. You have some possible solutions in the posts above. Have you tried these?
If your animations are critical to your site and you don’t mind the user having to wait a bit, you could load the critical js files before the content (in the head of the page) and potentially add a loader animation or page spinner.
Side note. Once you’re done developing your site, you can merge and minify all your js assets to improve greatly page load times.
Thank you very much. I will redirect my attention toward minifying and
eliminating anything that I can.