New Shopify Certification now available: Liquid Storefronts for Theme Developers

How to disable animations but only on mobile? - Streamline theme

Cryyos
Excursionist
18 0 133

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. 

Screen Shot 2022-08-27 at 10.26.51 AM.png

Any ideas? Thank you!

Replies 2 (2)
Patrik1470
Visitor
2 0 0

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;
}
}

Patrik1470_0-1695207870452.png

 

Patrik1470
Visitor
2 0 0

I changed it to max-width:749px, that's what my theme uses as mobile breakpoint