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.
Good to know that this is being worked on! Just ran into this same problem while working on a client’s site.
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!
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 
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.
Soooo is this still being worked on? Was getting insane trying to figure out why the initial transform state persists even on disabled interactions and already did the duplicate approach that was suggested as a workaround but it is still not ideal to have duplicates on the page of course.
Just encountered the same issue…Is there any way we can solve this issue manually for now please?
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Hi @billchien @dram @jarnom @hellochriscole @Billeasy
I know it’s been quite some time since you all reported this issue around mobile display settings for interactions, but I have good news!
Our team was able to resolve this issue and initial states for interactions will now behave as expected. Going forward, you will be able to define IX2 initial styles that can be enabled or disabled based on which media query breakpoints are selected.
Holy hell, I was just having a chat with a fellow animator and we were thinking that this is never going to change! Is this already deployed?
edit: it is indeed fixed for both initial state and while scrolling in view kind of ix.