Reinitialize webflow after ajax callback

Hi

I’m using webflow to design ASP.NET web applications (Single Page Application scenario). Everything works fine, until I use jQuery ajax to replace a div on the page. The new div is loaded and displayed correctly, however the webflow animations are not working in there. No loading animation, no hover effects, etc.

Is there a JS function I can call in webflow.js which will reinitialize webflow for a given DOM structure or for the whole page?

Thanks!
Marco

Webflow.js does include two functions that may be helpful when working with single-page applications.

Webflow.destroy() - call this function to clean up any components or stop any animations before DOM elements are removed from your app.

Webflow.ready() - call this to re-initialize the whole page once your app has inserted new DOM elements.

Hope that helps!

2 Likes

Hi Danro

Wow, thanks, that helps a lot! You guys are awesome… I love webflow!

I suppose when I call destroy() and ready(), this will also replay the initial onload animations, right? If so, does your JS file offer a way to limit animation execution to a certain DOM-tree (only the newly loaded div) ?

If not, I can live with it for the moment.

BTW: We are developing a fully streamlined ASP.NET MVC web app development process / toolset that integrates with Webflow. Essentially, the designers and developers can work hand in hand and - for the first time in web history - the designs can easily be updated even after incorporating it into the dev environment. Do you think your management might be interested in a cooperation/partnership (package deal webflow + our framework) ? Who would I have to contact?

Thanks!
Best regards

Marco