javascript - Implementing Webflow JS in WordPress

I am trying to implement Webflow's horizontal scrolling in WordPress.

HTML Webflow export (working): /webflow/horizontal-scrolling/

My WordPress attempt (not working): /horizontal-scrolling/

As you can see in the WordPress version, scrolling down does not make the images in the purple section move horizontally.

My questions are:

1. What can be done to fix this JS error in the console?

webflow.js:16 Uncaught TypeError: Cannot read property 'tram' of undefined
    at Object.<anonymous> (webflow.js:16)
    at n (webflow.js:7)
    at Object.<anonymous> (webflow.js:7)
    at n (webflow.js:7)
    at Object.<anonymous> (webflow.js:16)
    at n (webflow.js:7)
    at Object.<anonymous> (webflow.js:16)
    at n (webflow.js:7)
    at webflow.js:7
    at webflow.js:7

2. webflow.js is a huge file (155.3 KB). Surely, the actual relevant code is only a small fraction. How do I identify what part it is so I can use just that?

Here's how I loaded the JS in WordPress:

Code in a custom functionality plugin:

wp_enqueue_script( 'main', plugin_dir_url( __FILE__ ) . 'assets/js/main.js', array( 'jquery' ), '1.0.0', true );

wp_enqueue_script( 'webflow', plugin_dir_url( __FILE__ ) . 'assets/js/webflow.js', '', '1.0.0', true );

where main.js is:

(function($) {
    $("html").attr("data-wf-page", "5c37e0e1e3cff796d50e5cca");
    $("html").attr("data-wf-site", "5c37e0e1e3cff72e980e5cc5");
})(jQuery);

Thanks in advance.

I am trying to implement Webflow's horizontal scrolling in WordPress.

HTML Webflow export (working): https://horizontalscrolling.demo.site/webflow/horizontal-scrolling/

My WordPress attempt (not working): https://horizontalscrolling.demo.site/horizontal-scrolling/

As you can see in the WordPress version, scrolling down does not make the images in the purple section move horizontally.

My questions are:

1. What can be done to fix this JS error in the console?

webflow.js:16 Uncaught TypeError: Cannot read property 'tram' of undefined
    at Object.<anonymous> (webflow.js:16)
    at n (webflow.js:7)
    at Object.<anonymous> (webflow.js:7)
    at n (webflow.js:7)
    at Object.<anonymous> (webflow.js:16)
    at n (webflow.js:7)
    at Object.<anonymous> (webflow.js:16)
    at n (webflow.js:7)
    at webflow.js:7
    at webflow.js:7

2. webflow.js is a huge file (155.3 KB). Surely, the actual relevant code is only a small fraction. How do I identify what part it is so I can use just that?

Here's how I loaded the JS in WordPress:

Code in a custom functionality plugin:

wp_enqueue_script( 'main', plugin_dir_url( __FILE__ ) . 'assets/js/main.js', array( 'jquery' ), '1.0.0', true );

wp_enqueue_script( 'webflow', plugin_dir_url( __FILE__ ) . 'assets/js/webflow.js', '', '1.0.0', true );

where main.js is:

(function($) {
    $("html").attr("data-wf-page", "5c37e0e1e3cff796d50e5cca");
    $("html").attr("data-wf-site", "5c37e0e1e3cff72e980e5cc5");
})(jQuery);

Thanks in advance.

• javascript

Share Improve this question asked Jan 14, 2019 at 9:58 Sridhar KatakamSridhar Katakam 15522 silver badges2323 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Got it working.

I had to add a couple more data attributes in the HTML markup to match those in the Webflow export.

Then replace both the instances of window.$ with window.jQuery in webflow.js. An alternative to this to add var $ = jQuery at the beginning of that file.

Now need to figure out how to trim webflow.js to just the actual code that is needed..