Disable interactions based on media query

Some of the workflow interactions run slow(er) on mobile devices , so I would rather just disable them for “Mobile - Landscape” and “Mobile - Portrait”. Is that possible?

2 Likes

Hi @crocodile, it is not possible to disable the interactions by device type yet, however, you can use Visibility:none to hide the element having the interaction, and then use another element with visibility:visible, to be shown only on the mobile device you are targeting… so you would have one element with interaction showing on desktop, and then a mobile element shown on mobile device that is optimized for that viewing experience.

We are working to update interactions and other widgets all the time, and we do have this ability to disable an interaction by viewport device type on the list of things to check out.

I hope that helps, Cheers ! Dave

5 Likes

I would like to control transitions / interactions per media query as well.

For now… I’ve been building media specific portions.

PIA to do that though.

1 Like

This is really necessary now to make use of almost all the templates on webflow. Most of them have a hover interaction that shows information for projects and such that is unseen on touch devices. As it is, i need to duplicate whole sections just to disable interactions on mobile. It’s pretty ridiculous. Is this coming soon?

+1 for this…i ran into this issue recently as well

Any updates on this? This is also an issue for me

1 Like

This is also an issue for us. +1

Best,

Max

+1 this would speed up performance when scaling sites down for less powerful devices.

Hey 5% of the world still uses feature phones, that sounds small but it’s relative to where you live (I stay in South Africa and that figure is drastically larger)

Just my 2 cents ($0.0032) :smirk:

@cyberdave would interactions still be executed on the page even with workaround?

More push for
http://forum.webflow.com/t/scrolling-animation/9209/5

Hi @Aidz, great question! If the element where the interaction is defined has the display set to none, then the interaction will not execute.

I hope this helps!

1 Like

I ran into an issue when trying to use this method. The problem was that the interactive element I wanted to disable already had an initial appearance of “none”. So I didn’t have the option to set to “display none”. What I had to do was set the element’s opacity to 0 for the smaller queries. Not the best solution, but I couldn’t think of any other way to keep it hidden.