hi all. i have a trigger that open the menu element from bottom to top with size height 0-100% (and close as different trigger due to different close element).
but i want this open animation from ‘bottom to top’ only applied in desktop and tablet breakpoint. start from mobile landscape and below, i want it opened sliding from right to left.
so im thinking set a different trigger based on different breakpoint in a same element. but seems like not possible to do in webflow?
what is the best practice you guys do this kind of scenario? many thanks
hi @bondy_s best practice from UX point of view is to have identical behaviour not to confuse user. But if you need this from some special reasons you achieve this with custom code. You can use css media queries or javaScript
Hi @bondy_s, one thing you might do is to duplicate the original elements, then set the orignal to only show on desktop and tablet and use the original interactions set to trigger on desktop and tablet only.
On the duplicated elements, set those to display none on desktop and tablet and to display only on mobile landscape and mobile portrait and then duplicate the original interaction with a new name
Update the duplicated interaction to target the duplicated elements and to only run the interaction on mobile landscape and mobile portrait.
You can basically create two elements one to show for Desktop and Tablet and one with different interaction behavior for mobile and portrait.
While I agree that is the other way how to, two navigation mean maintaining two elements instead one. I’m not convinced that is the best way for simple task like this as navigation for mobile has no huge changes compare to desktop nav, that’s why I didn’t mention this option but of course create another extra element is a simplest no-code way.
hi @cyberdave thanks for the idea. yup, that’s what i did. so far it did the trick with some small notes on the initial state: those 2 initial states on each trigger will override+compound each other. imagine 1 trigger has width 100% and height 0 as initial state (prepare the menu slide up from bottom), and the other one has height 100% and width 0 (prepare menu slide right to left). they’re will then compounded as height 100 and width 100. but for this i tweak it from webflow’s style in different breakpoints to set the initial state. maybe you have another idea on this?
but yep, overall at least we know how to achieve this kind of scenario in webflow. thanks
@Stan while your point about ‘UX should be identical behavior’ i believe is debatable, at this state i only want to know what webflow can do and if i do it correctly in technical pov. this is from my pov as traditional html+css+jquery FE developer who want to explore more webflow’s power that my colleague UI designer can do+explore, without being too dependent on handcode scripting (which is her weak point). so yeah, im not interested in the UX concept atm, and i will let her decide what’s the best and i will trust her judgement
Hi @bondy_s no problem there is always choice to do things many ways and if designer can’t do simple CSS code, inserting extra element is the best way.
Hi @Stan and @bondy_s , thanks for the good feedback, I think that improvements to allow changing of action trigger or action timeline by viewport and more flexibility is a good thing, I will help to advocate for that.
The custom code feature in Webflow was added knowing that sometimes there is a need that the designer UI/function does not yet fulfill, so there is the css route. I know that can be frustrating though when it is not natively a feature yet.
I think that adding this will help to make Webflow better, I will help to share the feedback
