0

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
  1. 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.

1

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..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.