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?
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.
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.
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.
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?
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.