I am a WordPress developer thats recently started on a team that uses Webflow. I am still getting used to some of the deeper Webflow features, so please forgive my ignorance.
On our homepage, we have an animation in the hero section that looks great on desktop and tablet. But the animation does not trigger on mobile (<480px). When I use the interaction preview feature in the designer, the animation looks fine, but I can’t diagnose why it isn’t triggering on the frontend.
The interaction is a page trigger called “Home Hero Scroll Mobile”
Hey Cameron, I went through the files but couldn’t pin point anything in specific.
I have seen such problems in the past and so, from my experience they usually occur because of a plugin you’re using on Webflow. So, if you’re using a plugin, try disabling it for once and see if it resolves the problem.
I was eventually able to figure out the issue. The cause was actually a buggy page section much further down the page. Due to an unrelated issue, the page section in a mobile view was much larger (by thousands of pixels) than it should have been.
The hero section animation is a “while page is scrolling” interaction. Because the keyframes are set on percentage of page scrolled, and the page was MUCH “taller” than it should have been on mobile, the interaction was completely out of view by the time the user had scrolled even 1% down the page.
TL;DR - if your interaction is a “while page is scrolling” animation, check your keyframes. I suspect this is a common issue because its very typical for pages to get much taller in mobile layouts because everything starts to stack vertically.