Implementing Webflow JS in WordPress

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:

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

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.

Read more here:: Implementing Webflow JS in WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *