Streaming live at 10am (PST)

Resolving jQuery and Webflow.js Conflicts

What’s up team, hoping to get some insight into this dilemma!

I’m exporting my Webflow project that includes page-scroll-triggered opacity animations and various show/hide toggle animations. I believe it is causing a variable conflict… SOME of my animations (like slider triggers and menu opens) are working, but the real fancy stuff is not.

This will be used in a Salesforce site (Visualforce), which, once rendered in the browser, references its own JS libraries.

My Process

I include the remote jQuery and local webflow.js scripts in the footer section as recommended, with the following in my tag

<html data-wf-page="5f1f405bd2737d3d179af71d" data-wf-site="5f0fb4444eeb1194a8661fe9">

… and this script in the header, which I assume invokes the animations found in jQuery/webflow js files:

<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>

As for the conflict, most resources tell me to include this script immediately after the referencing the jQuery script, ie.

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

The Question

Assuming I’m on the right track, do I need to resolve conflicts for BOTH the jQuery and webflow.js files? Do I need to add code to the .js files themselves? HALP.


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