Streaming live at 10am (PST)

Scroll based interactions not disabling completely on Mobile


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


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