Webflow.js and jQuery plugins

Community resources Webflow Tips
1

Webflow.js

Whenever you export or publish a site from Webflow, we include two scripts in the HTML:

  1. jQuery - externally hosted on Google’s CDN
  2. Webflow.js - our own micro-library for scripted components.

In order to access these scripts from your own custom embeds or external JavaScripts, we’ve developed an asynchronous wrapper that will only run after the other scripts (and HTML document) are ready.

The wrapper script looks like this:

var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow api
});

(github gist)

jQuery Plugins

jQuery plugins can be added to your webflow site, by placing your scripts (or links to external scripts) into the </body> code area, as outlined here: http://help.webflow.com/adding-custom-code

Webflow API

When you write JavaScript using our async wrapper, that also means you will gain access to the Webflow API. Currently the feature set is very minimal, but as we grow and selectively add more components to our front-end library, we see this becoming a powerful tool for design + code collaboration.

Here’s a quick example of something you can currently do with our API.

var Webflow = Webflow || [];
Webflow.push(function () {
  
  // Find example element
  var $element = $('.resize-demo');
  var $parent = $element.parent();
  
  // Listen for optimized resize event
  Webflow.resize.on(function () {
    
    // Do something with element on resize
    $element.height($parent.height());
    
  });
});

(github gist)

More advanced users are welcome to browse the webflow.js source that ships with any exported or published site. We plan to open source this library on GitHub – broken out into modules, to make it even easier for developers to work with Webflow.

Happy designing (and coding)!
-Dan

19 Likes