I have an interaction that is triggered on hover and works well for desktop browsing. I’d like to replicate the interaction for mobile, using a click trigger in place of hover.
When I click change from editing the widescreen browser to the mobile experience and edit the interactions, it won’t let me apply separate interactions on each. Instead, it changes them both to the same.
In the meantime I found my own solution. I duplicated the elements with interactions on them, removed the interactions on the duplicates, and hid them with dirsplay:none. Then on mobile version, I brought back the hidden elements and hid the others.
This is a hack really, and I don’t think it’s particularly user friendly for people with screen readers and such.
Has anyone figured this one out yet? Re: Turning off interactions on mobile due to the interactions poor performance. I have a site the has an “inforgraphic-like” layout. One long scrolling page. I though about taking any interaction or animation I would like to direct attention to - just make it a separate page. Most interactions at the top of the page execute correctly bc they’re triggered by the actual page load, therefore executes on load. But on mobile if yo have long pages, like i do, people scroll so fast that the interactions don’t have a chance to run it’s course(s).