IX 2.0 initial state apply on all devices

Hi Community,

if I won´t an IX 2.0 on my mobile device and I disable it over the button, why it will apply the initial state that comes from the interaction. This makes absolute no sense for me.

image

Greetings Maurice

1 Like

I have an issue with this. I have different page load animations for mobile and desktop. with different starting states. but now the starting position of one applies to the other and they all end up looking weird and not working.

I guess this must be due to a browser limit? but it would be nice if it didn’t have this limitation.

I think I’m having the same issue. My navbar needs to slide out on tablet and below. Therefore, I set my initial state to -100%.

But, on desktop, it does not need to be off the page at all…

https://preview.webflow.com/preview/premiere-urgent-care?preview=d077381666fbf98031423ea30104999c

Looking into writing a custom media query to pull the navbar out only on the desktop size.

Any thoughts on this one @thesergie ?

Hi everyone, unfortunately this is a limitation of IX2 that we cannot work around. Due to the complexity of IX2, we must render our initial styles during the server-side publish… and because this publish happens on the server, we are unable to look at browser-specifics such as device width.

I would recommend using traditional CSS and media queries to style these elements if you require them to have a specific style on page load.

1 Like

There are two workarounds to this:

a) in IX2 instead of setting a “initial state”, just set a time frame, with a duration of 0s as your first step in the animation. This should act then as your initial state.

b) Set your initial state with CSS. As you can set different rules for different breakpoints (aka devices) you should be able to set your initial states depending on your users device.

combine a and b…

2 Likes

Hm… why would I never thought of that? This actually sounds like a solid solution. I wonder if this won’t result in any kind of flickering on load. Will definitely test this solution - I am right in the middle of doing exactly this kind of animations that should be disabled on mobile devices but have initial states that needed the workaround.

Thanks for the idea!

I’ve been using this method a lot more recently. Haven’t found any negatives to this approach.

Solid idea. I haven’t a need for different breakpoint initial states.

Another thought is to use Method A with four separate triggers, one for each breakpoint using the trigger settings option. This way you can also adjust the “initial state” and “end state” for each breakpoint. It just require more planning to avoid going back and forth adjusting each interaction for each animation tweak.

a) in IX2 instead of setting a “initial state”, just set a time frame, with a duration of 0s as your first step in the animation. This should act then as your initial state.

b) Set your initial state with CSS. As you can set different rules for different breakpoints (aka devices) you should be able to set your initial states depending on your users device.

Thanks. The problem is, the animations apply inline CSS. If for example the animations should only trigger on mobile, after running them and then increasing screen size to desktop, everything will be broken → the inline styles overwrote desktop styling.

This is of course only the case for people that resize the window. But still not nice…

1 Like