Disabling Animations on Mobile Devices with CSS Media Queries – 8 pts

8-10-point Speed Boost Mobile

Overview

Animations can slow down mobile performance, especially on devices with limited processing power. To improve load times and user experience, you can disable animations for mobile devices using CSS media queries.

---

How to Disable Animations on Mobile

Add the code below to styles.css while on the Template Page in the TNT CMS.

@media (max-width: 768px) {
    .wow {
        animation: none;
    }
}

Explanation:

• @media (max-width: 768px): Targets devices with screen widths of 768px or less (phones and tablets).
• .wow: The class applied to elements with animations (e.g., via WOW.js).
• animation: none;: Disables animations for those elements on smaller screens, improving performance.

Benefits

• Faster Mobile Load Times: Prevents animations from consuming resources on mobile devices.
• Improved Battery Life: Reduces processing demands, conserving battery power.
• Enhanced User Experience: Provides smoother performance on mobile without sacrificing animations on larger screens.