Mobile scroll interactions bug

[koz_mi (Mikhail Kozhevnikov)]

Hello everybody!
Today I had a strange problem with interaction on mobile.
I set up all the interactions for desktops, on mobile they had to be disabled.
However, now all the content that should be visible on mobile is lost somewhere. I can see it in the designer, but when I turn the preview all again disappears.
If you enable interactions on all devices, the content appears, but the mobile animation is not displayed correctly due to the change in the lyout.
Thanks for your responses!

Here is my site Read-Only:
https://preview.webflow.com/preview/nafen-ico?preview=3991f99cf0bfec61aff57308747fc7f2

[matthewpmunger]

Hello @koz_mi this is a known limitation. Please follow these steps.

@matthewpmunger

The way to keep your animation on desktop and tablet but disable it on mobile is to remove the initial states from the interaction and apply them directly to the elements in the styles panel. Then go to your mobile view in the designer and remove the initial states needed only for the desktop interaction.

@matthewpmunger

Yes this is still a known issue with interaction initial states.

If it is necessary to disable (on smaller breakpoints) an interaction with initial states, then it is recommended to move the initial state settings to the styles panel instead of the interactions panel.

IX 2.0 initial state apply on all devices

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.

Let me know if you need anymore help. Happy designing!

[koz_mi (Mikhail Kozhevnikov)]

Thanks for the answer!
But I use the “while scrolling into view” interaction and there is no option for the initial state.
Is there a way to display interactivity on desktops but not apply them to mobile?

[matthewpmunger]

Sorry, I misunderstood.
Do you mean the trigger settings?

[koz_mi (Mikhail Kozhevnikov)]

Yes, I tried to use this options.
it seems logical to me that if these flags are disabled, the animation should not occur on these types of devices.

[koz_mi (Mikhail Kozhevnikov)]

What I want to achieve:
on desktop animations are working.
on other devices everything is displayed as in the designer.

What I want to achieve:

What I get:

[matthewpmunger]

Hey @koz_mi, that is strange. Seeing what I can figure out for you.
Does this also happen on the published site or just in the designer?

[matthewpmunger]

Here’s what I found, an answer from the Webflow staff earlier this week. Hope that helps.

@mistercreate

There is currently an issue with these interaction visibility settings that our team is working on a solution for. Basically, initial states don’t respect the breakpoint visibility settings within the interaction panel at this time. So when you have an element with an initial state that is visible, this will still show on all breakpoints even if that interaction is set to be invisible on tablet. I don’t have an exact time frame on when a fix will be pushed, but I do have a workaround you can use:

In this case you can create two instances of the element / section in question. One can be set to display:none for mobile breakpoints and the other set to display: none on desktop. From here you can set the interaction to affect only the element visible on mobile (tablet, landscape, portrait) and leave the desktop version without any interactions. This is definitely a workaround and not an ideal solution, but should help unblock you until we can push a fix.

[koz_mi (Mikhail Kozhevnikov)]

Thank you very much! That helped!
I would like to avoid duplication, I hope this bug will be fixed in future updates! In the meantime, let it work so