Interactions on load sometimes do not render on exported site

Hey there :wink:

My customer have website that has “Webflow” animations on page load using webflow.js library.

The problem is - this animations sometimes work and sometimes not, is there any way to ensure via javascript (or some other coding way) the animations fully loaded or there’s a way to re-init the animations process?

Any help will be appreciate, thanks :slight_smile:

1 Like

Welcome to the forum. Please read the guidelines for each category before posting.

Hey, thanks for thew quick replay, I don’t have an option to add read-only link because i don’t have an access to the account built the website, another developer built it about an year ago. I can send you link to the development site which has the problem I mentioned earlier, it’s http://makam.operad.com/

Hi @ben-el, well having the read-only link really helps, I would contact the the original designer if possible to get their help.

One thing I noticed, is that there are some custom code script errors on the published page:

Those custom code errors can have an impact to the load animations.

As far as the interactions go, I would mark the option in the load interaction settings, to wait until the page has loaded before triggering the animations, the page might not be fully loaded yet when the interactions get triggered and do not trigger a second time without re-loading the page.

Hi @cyberdave, as i mentioned in the previous message - the link is a development url, not the final one.

Unfortunately I can not see this errors in the console debugger, but it’s talking about fonts and images that was not load, I’m not sure how much is connected to each other.

About the option to wait until the DOM has loaded before triggering animations - can it be done somehow from the code itself? as I said - I don’t have the access to the original project dashboard and I’m not sure if it actually built on your platform or just using your Javascript library for animations.

You can see the original project in this link: http://makam.co.il/

Thank you again :slight_smile:

Hi there @ben-el, It seems the error is referring to a problem with the localhost server that is serving some image on the dev site, i.e. it is some kind of localhost issue, I would upload this site to an actual hosted server to see if the behavior changes (maybe you already have, but still check the localhost image error)

I would correct this error before proceding further on troubleshooting the interactions. I cannot provide support for external sites, however you could rebuild the site in Webflow or contact the original designer (if possible).

Webflow sites are designed to work as they do in Webflow when exported, and the exported files have not been modified.

I hope this helps.

The only change I have made is to move the template files to Wordpress platform (it was just simple HTML templates) because the customer wanted to manage the content.

It’s not reasonable for me to build the whole website from scratch again… I understand what you say, my only question was if there is a function to re-init the javascript code after page loaded, It would be awesome if you can only answer this question and let me handle it.

thanks :slight_smile:

Hi @ben-el, this article may help: Reinitialize webflow after ajax callback - #2 by danro

I’ll give it a try, Thank you very very much for your help mate :slight_smile:

Hi @ben-el

I have run into this issue and I believe it’s caused by certain ID numbers relating to the interactions being different from those in the site’s .CSS file.
I found I needed to flush the cache of my CDN (CloudFlare) in order for the browser to re-download the correct .CSS file.
(Obviously make sure you’re uploading the site’s .CSS file even if you’re only making ‘page level’ changes.)

Good luck!