When integrating Webflow site with AngularJS, webflow.js stops working

Design help Custom code
1

Hello users,

First of all, Webflow has been awesome in helping non-programmers like me create a web site. I am integrating my site built in Webflow with AngularJS. The problem is that as soon as I converted my site into a single page app, the interactions stopped working.

I have searched extensively on Webflow Forums as well as elsewhere, and haven’t found a solution that works well. Here are some relevant posts that I have followed:

I have tried lazy loading of webflow.js as pointed out in the second post above, using AngularJS 1.2.0 lazy load script in partials · GitHub

It works sometimes, and doesn’t work at other times.

Specifically what doesn’t work for me;

  • Interactions: text that should appear about 0.5 seconds late doesn’t appear at all
  • Google Maps integration doesn’t work

Has someone been able to integrate webflow.js into an AngularJS single page app? If yes, any suggestions for the above issues?

Nav.

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

2

This thread may be helpful:

3

Thanks! The post says Webflow.ready() should be called inside jQuery.ready handler, so that it is executed after the DOM has been constructed. Here’s what I tried and it didn’t work:

+++

Content from index.html
– Navigation bar from index.html –
– Here I insert content from home.html –
– Footer from index.html –

Home.html
– HTML content, which includes some transitions from Webflow –
– At the end, call Webflow.ready() –

+++

I also tried the following:

app.js
– $stateProvider –
– onEnter: function(){
Webflow.ready();
}

This didn’t work either.

I’m probably not executing Webflow.ready() in the right place. Suggestions?

4

It works, it works!

I searched for the equivalent of jQuery.ready handler in Angular. I actually found a couple different solutions. Here they are:

Recommended:
Step 1: In your routes (I have them in app.js), add the following for the page that uses Webflow.js. I’m copying the entire syntax, but what you need is the “onEnter” declaration below. This is calling the Webflow.destroy() function as soon as you enter the page, which means as soon as your route changes.

// HOME
.state(‘home’, {
url: ‘/home’,
templateUrl: ‘home.html’,
controller: ‘AppCtrlWebflow’,
onEnter: function(){
Webflow.destroy();
}
})

Step 2: Define the following controller:
// This controller is used in multiple HTML pages that use Webflow.js
app.controller(‘AppCtrlWebflow’, [‘$scope’, function($scope) {
$scope.$on(‘$viewContentLoaded’, Webflow.ready());
}]);

That’s the recommended approach.

Now an easier approach is the following, which also worked for me but I only used it for testing.

  • At the top of each page, call Webflow.destroy()
  • At the bottom of each page, call Webflow.ready()

I believe that the first approach is superior because it calls Webflow.ready() when the DOM is loaded, while the second approach calls this function when the HTML is loaded which could be slower.

I’m not an expert developer, but I’m sharing what I learned. I’m happy to share more code if anyone else runs into this problem. Angular and Webflow are finally working together!

4 Likes
5

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