Canvas custom code separation

Hello fellow community,

Iv’e got a fairly simple question, but since i cant find any solution to it already being posted here, i just start a new topic and hopefully get some useful response.

Im working on a website atm, and im quite experienced by now in terms of using jQuery to create complex animations in addition to Webflow’s/Finsweet’s Interaction Panels.

Now iv’e encountered a problem which im sure the more experienced users can solve easily. I created a jQuery function which controls the animated interaction of my desktop Canvas. But of course, this animation doesn’t suite the proportions of my mobile/tablet canvas settings.

Is there a way of tagging parts of my custom code to only trigger in certain canvas views ? I don’t want my desktop applicable code to trigger on tablet and vice versa, and since this is possible with native Webflow Interactions, i thought maybe there is a way of doing this also with custom code.

Im thrilled to see the answers, until then, happy creating :slight_smile:

Going to be honest, I have not touched even a crumb of jQuery before, but it sounds like what you’d want to do is modify the code based on the breakpoint size, right? Does this answer your question at all?

If you want to conditionally trigger code based on the browser viewport I suggest using the Window.matchMedia() web API. That way if a user rotates the device that will also be factored in.

See: Window.matchMedia() - Web APIs | MDN