Edge works fine, but Chrome and Firefox (Windows) seem to skip first part of a simple Move + Opacity interaction when landing on the Home page for the first time. Reloading the page after that works fine.
I started adding delays to the actions but it wasn’t working well. Is there any other Custom Code to add to the project to try?
This happens on both the ‘live’ version temporarily hosted at GoDaddy:
I checked the animation and I believe that the problem is that the animation is set to start when the page starts to load. Try moving it to when the page finishes loading.
I believe the animation is finished before the browser has time to load the page. Different browser come with varying levels of ‘baggage’ that slows down sites.
Here’s a video comparison of browser load times. (I use Brave personally.)
Good of you to check across multiple browsers! Always a best practice for web design!
(I don’t suppose there’s a way of just switching all actions in the animation from ‘page starts to load’ to ‘page finishes loading’ in one swell foop, is there? It’s the type of change that I tend to mess up)
I don’t think there is. Not that I know of anyways Changing all of the animations over is a good way to remember not to do the same int he future hahaha
That seems to have done the trick Optimus0087. Thank you!
Do you happen to know… the thing I found odd was that when I went to Interactions and clicked on “When page finishes loading”, all the animations popped up under that. However, they also remained under “When page starts loading”. So I had 2 of everything.
Deleting an animation in one list also deletes it from the other, so I presume the duplicates are necessary. But the animation, which I’ve called “Home Fade In” isn’t in both ‘page starts loading’ as well as ‘page finishes loading’, is it?
Same question about the others that look like duplicates.
PS: off topic, and while I’m already bothering you, can you by any chance tell why centering of the logo and text under it sometimes seems off? A bit to the left. drag the handle back and forth between all breakpoints but it looks fine regardless. Not a big deal but curious just the same.
Ah! Webflow saves a library of your interactions in case you want to reuse them across your site. You can see from the root animation menu that there is no animation when the page starts loading.
You’re not a bother at all! My inbox is always open to you
I believe it’s because you adjusted the letter spacing by 16px. It appear that the text is slightly to the left because the final letter has some extra space incorporated. You can see this clearly if you highlight the text.
To fix this, add a margin to the left side of your text! (7.5px seemed the closest to me.