Animation off-sync

Community resources Bugs
1

Hello,

I’m having trouble synchronizing my animations on load.
On the homepage, the 3 words in black are supposed to appear and disappear with 3 seconds delay.
I have setup my animations with delays so it works perfectly on my computer.
However, when I load it on a new device, the first attempt when loading the website breaks the animation synchronization and overlaps the word.
Refreshing fixes it, but this is bad because it leaves a bad first impression.

Also, when you switch to different tabs on a different website and comeback to my website, the keywords are off-sync again.
Why does this happen? Is there a way to ensure that the animations are always in sync?

1356×490 29.8 KB

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

2

Looks okay in Google Chrome. What browser are you using?

3

Google Chrome on Mac OS X El Capitan.
Google Chrome Version 49.0.2623.87 (64-bit)

While it’s good to hear that it looks fine on your side,
I suggest you to open a new tab, browse any other website for 20 seconds, and revisiting the tab with my website.
It will show the words overlapped almost all the time.

4

This is most likely a bug. I have moved it to the bugs category and the technical team can have a look at it.

5

Hi @songyh1996, thanks for the report and thanks @samliew for putting this in the bug category.

I am investigating, and as soon as there is an update, I will post back.

Thanks in advance!

6

Hi @songyh1996, I am still checking on this, but I think that not all interactions are loading from cache when the page changes and when the user presses the back button on browser/mobile device.

When the back button is pressed, the page is loaded from cache, the page itself is not reloaded in the browser, so the interactions may not run correctly.

It may be related to this: javascript - Prevent safari loading from cache when back button is clicked - Stack Overflow

I would be curious to know, if there is any time in which refreshing does not fix the problem, if not, then I think this likely due to a caching behavior.

7

@songyh1996 Hi, maybe try to put wait for page to load on all of the interactions? Just a suggestion, hope this helps! :wink::grinning:

8

That’s an interesting speculation, because I’ve never had issues with the back-button.
People who have reported this issue were in certain situations:

  1. slow internet connection → relatively slow loading speed → offsync animations
  2. opened my website → browsed other websites on different tabs → came back to my website to see offsync animations

And refreshing the website would almost always fix the issue, but it doesn’t not prevent it from happening recurringly.

Do you still think this could be a caching issue, or could it be multiple issues such as how tabs are put into idle mode when not active due to Chrome’s (or browsers, rather) native idling features?

9

Thanks for the suggestion, I did initially have wait until assets are loaded option checked for all interactions, but it did not solve the problem.

10

Ok, hope you resolve the problem soon…:wink::blush:

11

Hi Dave,

I decided to duplicate the problematic website to a different link.
I’m under search for internships and this could be affecting my job search heavily, so I want to move to a temporary solution for now.

I created a new preview link for you to review, which is identical to the original website!
https://preview.webflow.com/preview/antonio-song-cc9a836eaa93e2d84e30ddc1d6?preview=2aad3627ab9af85a00516d8e5260bd51

Thanks,
Antonio

12

I suspect it is because of this:

Timeouts change to a min of 1000ms in inactive tabs.

13

Hi @samliew, nice find on that, I will need to check this out. Thanks for checking!

14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.