Irregularities with Previewer and Published Page

Read-Only Link
Published Project Link
Video Showing Issues

Written version of the issues I’m facing:

  1. I have a grid with animations on my home page. It sometimes displays on my previewer and sometimes doesn’t. When I publish the page, it is never visible.

  2. My custom lottie animation for page loading works great on the previewer but does not fade out when the site is published.

Please help me understand why these things are happening and how I can fix them. Thank you!

Issue #1 has been solved. An element’s height was set to “auto” but I then forced a set minimum height on it and now the grid shows up in the published page. I’m not sure why it only occasionally worked in the previewer and I’m not sure why it would never show up in the published page while it sometimes showed up in previewer. Perhaps I’ll never know, but the most important thing is that it works.

Issue #2 is still unresolved.

Hey @RobbieChristian :wave:

Glad to hear you got the first issue resolved—that’s very strange you were getting inconsistent behavior in the Designer Preview though.

In terms of the second issue, I’d recommend you tweak the loading animation a bit so that when the page starts loading, you show the lottie animation (maybe with some sort of background fill set to your site background color to hide any elements appearing) and when the page finishes loading you can trigger the opacity animation and then hide the element. Since the loading animation is used to tell users that the site content is being loaded, folks on slower internet connections wouldn’t see that until the site is ready to be interacted with.

I’m not sure that will totally fix the issue your experiencing, but I’d recommend giving that a try and seeing how it works out.

Thanks @mikeyevin! I’m going to give that a try right now.

I like your way better than mine, but unfortunately it still fails to fade out in the published page like it does in preview mode. If you are on a tab and you re-click the same tab however, it works great. As soon as you pick any other tab, the animation does not fade out like it should.

Hmmm, it looks like you’re having some issues with the Typekit script that’s firing on the page and I seem to recall a similar issue from another user a while back.

I’d try removing that to see if it smooths out the transition as I can’t really see much else that would be causing the issue :+1:

Update: it works in incognito mode in Chrome, but not a regular page.

Hmmm, are you using an ad blocker by chance?

Just as a test I disabled mine and noticed that the site loads much more consistently. That may be why you’re not seeing the issue in Incognito (as typically it’s not running in an incognito instance).