Streaming live at 10am (PST)

Reinitialize webflow after ajax callback



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?


Reinitialize Webflow IX2

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!

Interactions on load sometimes do not render on exported site

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?

Best regards