A user is experiencing laggy scrolling animations on mobile devices while they display smoothly on desktop. They want to disable these animations specifically for mobile views.
Solution provided:
animation-duration and animation-delay to 0s with !important flags@media only screen and (max-width: 768px) or adjust the breakpoint to match the theme’s mobile breakpoint (e.g., 749px)Key limitation:
The discussion includes a code snippet demonstrating the implementation and appears resolved with this workaround approach.
At the moment there are little scrolling animations that appear on my site (stimagz.com), and just help add a bit of life to each section as you scroll. These look great on desktop, but rather laggy on mobile so I want to get rid of them.
Unfortunately, there doesn’t seem to be a different option for that in my theme settings, only a universal on or off button.
Any ideas? Thank you!
You can add custom css to disable animations on mobiles in theme settings. What I did was to make all animation durations 0s and also delays. That way it does not animate. It’s not the cleanest solution but it works.
Hope this will help you guys if you struggle with the same issue!
@media only screen and (max-width: 768px) {
* {
animation-duration: 0s !important;
animation-delay: 0s !important;
}
}
I changed it to max-width:749px, that’s what my theme uses as mobile breakpoint
