Some Browsers Skip Start of Interaction

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:

www.copyrightmv.com

As well as on what gets published to webflow.io:

https://preview.webflow.com/preview/copyrightmv?utm_medium=preview_link&utm_source=designer&utm_content=copyrightmv&preview=70bdb022f182762a081c1dc2073ae0d5&workflow=preview

In case it matters, I already have this Custom Code:

Head Code
Add code at the end of the tag:

**
.wf-loading * {
** opacity: 0;

}

Thank you.


Here is my public share link: LINK
(how to access public share link)

Hi Johnrc!

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!

1 Like

Makes perfect sense Optimus0087. Thanks!

(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? :slight_smile: It’s the type of change that I tend to mess up)

And thanks for that enlightening video.

Cheers!

1 Like

I don’t think there is. Not that I know of anyways :see_no_evil: Changing all of the animations over is a good way to remember not to do the same int he future hahaha

All the best!

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.

Cheers!

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.

Capture

You’re not a bother at all! My inbox is always open to you :slight_smile:

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.

Capture

To fix this, add a margin to the left side of your text! (7.5px seemed the closest to me.

Very good eye! It was only subtly off!

1 Like