Streaming live at 10am (PST)

Scroll based interactions not disabling completely on Mobile


#1

I designed a scroll based website, which has scroll based animation set to each element. The animation on mobile is disabled, but still it is taking the initial states from the animation. The elements (when seen through with “inspect” tool, still have the transforms applied which is ruining their position.


Here’s the read only link to my site

https://billeasy.webflow.io


#2

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.


Mobile scroll interactions bug
#4

Good to know that this is being worked on! Just ran into this same problem while working on a client’s site.


#5

having the same problem in a huge project i’m about to launch.

Have a slide in interaction on desktop only. But then it’s hidden en downwards (initial state of interaction) on mobile…

Feel very lucky i found this thread… but @webflow should’t you guys put these kind of little bugs somewhere very clear to see? I really have been scratching my head on this one… took me hours and a lot of stress… i say: make a very clear page with known bugs that you can check right away when something strange is happening in Webflow…

Thanks!


#6

Hi @jarnom

make a very clear page with known bugs that you can check right away when something strange is happening in Webflow

This is a great suggestion – thanks for the feedback here :bowing_man:

I’ll pass this along to the rest of the team to chat more on that suggestion.

As for how to workaround this issue: For now I recomend duplicating the section / elements that need to be hidden on mobile. The original section / element can stay as is with the interaction applied, while the duplicate can be assigned a combo class and altered as needed.

If you run into trouble with this let me know and I’m happy to take a closer look for you.

We’ll definitely post back to this thread when we have an update on the original issue.