Streaming live at 10am (PST)

Vue.js conflicting with Webflow Interactions 2.0

#1

Hi there,

Read-only Link:
https://preview.webflow.com/preview/ironmarket?utm_source=ironmarket&preview=5306591ab7c60ee275c9eed3c30bf0ea

I’m having an issue where I’m limited to only using certain transitions via Webflow’s Interactions tool with elements inside of the Vue.js Virtual DOM. (See element ‘Team Content Container’ with ID ‘Team’, this is the Vue.js wrapper. View the JS in the body custom code in the page settings panel)

In this instance, please view my read-only link and navigate to the Team Page, then hit preview. You’ll see that the interaction for Opacity and Translate-Y work superbly. But when you go to the live published page: ironmarket.webflow.io/team… you’ll see that only the opacity interaction is visible.

After looking at this forum post: Need help in JAVASCRIPT: Scrolling Interactions with Fullpage.js, I believe that Webflow’s JS is conflicting with the Vue.js instance.

Has anyone got any ideas of some code trickery which will allow me to retain use of all interactions, especially ‘Move’?

0 Likes