How to enable interaction on desktop view but disable for mobile view?

Hi,

I’m playing around with animations and I want to have an interaction on a particular div on the desktop view but a slightly different interaction on the same div on the mobile view.

An example of this would be that for the desktop view the div would move down 50px but for the mobile view it would only move down 15px, or perhaps not move at all.

However, when I try to change or disable the interaction on one view it changes it for all views on that div. Even if I create a combo class for the mobile view and change the interaction on that it still doesn’t work…

Any ideas please?

Many thanks,
Andrew

Hi, @andrewrubio

It will not work in the way you are trying to do this. When you are adding combo class you are applying it to the HTML element, so it does not depend on screen view.

Also, there is no way to turn off the interaction for the particular view. You can only create several identical elements, apply different interactions to them and hide one of the elements with on the view that you don’t need it.

Hope I was able to explain.

Regards,
Anna

1 Like

The workaround for this is to have two copies. One visible for desktop only, one visible for mobile only.

Apply the interaction to the desktop one.

1 Like

Yeah I thought that would be the only way but was hoping to avoid this as the files could be twice as big and therefore a slower website.

I will have to go with this though - thank you!

Maybe I will add this to the suggestions purely for efficiency’s sake.

Andrew

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.