Streaming live at 10am (PST)

Dropdown Animation & Mobile - IX2


#1

I’m working with IX2 for the first time and am having some trouble with styling the dropdown menus on mobile. I have it set up the way I’d like on desktop, when you hover over the parent category link, the dropdown menu slides up and fades in simultaneously.

However, the animation is clunky looking on mobile (jerky feeling), so I disabled it on everything but desktop. The problem now is that the initial state from the desktop interaction is hiding, setting the opacity to 0 and moving it on the Y axis.

I have two questions:

  1. Is there a way to apply a different effect to these dropdowns on mobile? Something that would be smoother, maybe some sort of accordion effect.

  2. If not, would it be best to sacrifice my animation on desktop and just do something that would work across all devices?

The ideal solution would be to keep my desktop interaction and fix / smooth out the animation on mobile or do an entirely different animation on mobile. If that’s not recommended I suppose I’ll go back to the drawing board, in which case any recommendations for cool dropdown effects that work on mobile with IX2 would be appreciated! :slight_smile:

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/children-of-rwanda?preview=7d73e559468a73ea019c24fc497225e6


#2

In the interactions panel it has an “Other Settings” at the bottom, where you can disable the effect on different devices.

@sam-g


#3

So I did use that to disable it on mobile. The issue is that I get this message:

image

The initial state sets the opacity to 0, the display to none and moves the dropdown list on the y axis:

image

So on mobile now the dropdown list never appears because it still has all of those initial state settings from the interaction.


#4

Okay what page and where is the animation? I’ll be happy to look at it for ya, because it’s probably a display position combination that needs adjusting.


#5

It’s the main menu on the home page:

It works as I’d like on desktop, but on mobile at this point after disabling the interaction (fade in + y position) the dropdowns just don’t show up:

Thanks for taking a look at it for me :slight_smile:


#6

In the actual interaction, in other settings at the bottom, check add tablet:


#7

What I would do is create a new Mobile Interaction and apply it to the nav buttons as well, only set that one to only apply to mobile states and not desktop (elements can have more than one interaction applied to them now!). Then at the start of that new mobile interaction reset the positioning of all of your elements into the correct place, but have it happen over 0 sec, that way the user never actually sees anything happening at first, and then once they are in position, begin your new mobile interaction accordingly.


#8

So I think I got it using ThreeProngs solution. I made a second interaction for dropdowns on mobile. I think it’s all set now.

Thanks for the help everyone!

-Sam


#9

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