Elementor animations look beautiful on desktop, but turn into a sluggish nightmare on mobile. Entrance effects, sliding blocks, and parallax not only annoy users when scrolling with their finger, but also add hundreds of milliseconds to page load time. And Google PageSpeed Insights won't forgive that.

The most frustrating part: Elementor settings don't have a global toggle to disable animations on mobile. But that doesn't mean the problem can't be solved. In 10 minutes and two files, you'll remove all animations for phones and tablets while keeping them on desktop.

The solution described here disables the elementor-animations stylesheet that Elementor loads on every page. Then we replace it with custom CSS using a media query: animations only work on screens wider than 1000px.

💡 Quick overview:

• Deactivate the built-in animations file via wp_dequeue_style in functions.php
• Create your own CSS with a min-width 1000px media query and move the original animation styles there
• Enqueue the new file via wp_enqueue_style with high priority
• For complex scenarios: an alternative method using PHP session to detect screen size

Step 1: Disable the built-in animations file

The first thing you need to do is dequeue the standard elementor-animations.css. Elementor registers and enqueues this file on every request, regardless of whether animations are used on the page or not.

Add the code to your child theme's functions.php or through the Code Snippets plugin. Do not edit the parent theme's functions.php directly: your changes will be lost on the next update.

1
// Disable Elementor animation styles for mobile devices
2
function custom_dequeue_elementor_animations() {
3
    wp_dequeue_style( 'elementor-animations' );
4
    wp_deregister_style( 'elementor-animations' );
5
}
6
add_action( 'wp_enqueue_scripts', 'custom_dequeue_elementor_animations', 9999 );
7
add_action( 'wp_head', 'custom_dequeue_elementor_animations', 9999 );

What's happening here: wp_dequeue_style removes the file from the output queue, wp_deregister_style completely removes its registration. The high priority 9999 is needed to intercept animations after all other scripts, since Elementor loads them late. Two hooks (wp_enqueue_scripts and wp_head) provide insurance against scenarios where the plugin hooks into different loading stages.

Verify: open the page source code (Ctrl+U) and search for elementor-animations. The link to this file should be gone.

Step 2: Create custom CSS with a media query

Now animations are disabled for all devices. To bring them back on desktop, we'll create our own stylesheet that wraps the original rules in @media (min-width: 1000px).

Create a folder and file in your child theme:

1
/wp-content/themes/YOUR_THEME/_sdstudio_dequeue/elementor/css_animate_dequeue.css

Open the original animations.min.css (located at wp-content/plugins/elementor/assets/lib/animations/animations.min.css), copy all its contents and paste into the new file, wrapping it in a media query:

1
@media screen and (min-width: 1000px) {
2
    /* Insert ALL contents of the original animations.min.css here */
3
    @keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0) scaleY(.95)}90%{transform:translate3d(0,-4px,0) scaleY(1.02)}}/* ... and so on */
4
}

The 1000px threshold is a compromise: most tablets in portrait orientation (768-1024px) will also get disabled animations. If you need animations on tablets, lower the boundary to 768px.

The result should look like this:

Step 3: Enqueue the new stylesheet

All that's left is telling WordPress where our custom CSS is located. Add the following to the same functions.php after the previous code:

1
// Include custom CSS animations with media query
2
$theme_url = get_stylesheet_directory_uri();
3
$dequeue_css_url = $theme_url . '/_sdstudio_dequeue/elementor/css_animate_dequeue.css';
4
wp_enqueue_style( 'css_animate_dequeue', $dequeue_css_url, array(), '1.0', 'all' );

The function get_stylesheet_directory_uri() returns the child theme URL (or parent theme if no child theme exists). This is safer than hardcoding the path manually.

Now open your site on a phone or in developer tools (F12 → Toggle device toolbar). Animations should disappear on screens narrower than 1000px, while working as before on desktop.

Alternative approach: detecting screen size via PHP session

We don't recommend this method for permanent use, but it's useful as a concept for other tasks where logic depends on screen width.

The idea: a PHP session saves window dimensions from cookies, and functions.php decides whether to disable animations based on this data. The downsides are obvious: the session adds server load, caching breaks (a page with session_start() doesn't cache properly), and the user's first visit always happens without screen size data.

If you understand these limitations and are willing to accept them, here's the code:

1
session_start();
2
if ( isset( $_SESSION['screen_width'] ) && isset( $_SESSION['screen_height'] ) ) {
3
    if ( $_SESSION['screen_width'] <= 768 ) {
4
        function custom_dequeue_elementor_animations() {
5
            wp_dequeue_style( 'elementor-animations' );
6
            wp_deregister_style( 'elementor-animations' );
7
        }
8
        add_action( 'wp_enqueue_scripts', 'custom_dequeue_elementor_animations', 9999 );
9
        add_action( 'wp_head', 'custom_dequeue_elementor_animations', 9999 );
10
    }
11
}

For production, the method from steps 1-3 is more reliable: it doesn't depend on sessions and works well with any caching.

Video: hidden Elementor animation settings

The short video below shows an alternative approach to disabling mobile animations through CSS classes and targeted media queries. This approach is useful if you don't want to completely remove all animations, but selectively suppress the heaviest ones.

⁉️🤔 Frequently asked questions

Why can't I just hide animated elements via CSS display: none on mobile?

Because display: none removes the element visually, but the browser still loads and parses the animations file. The page lags just the same, you just don't see it. A full dequeue via PHP solves the problem at the server level: 50-80 KB of animation styles never go over the network at all. On mobile data, that's noticeable.

Will this method work with other page builders like Divi, WPBakery, or Gutenberg?

The principle is the same, but the style handle is different. Divi uses divi-style, WPBakery enqueues js_composer_front, and Gutenberg doesn't enqueue a separate animations file at all (everything goes through wp-block-library). Find the handle through the page source code by looking for <link rel='stylesheet' with the plugin name in the id. Then repeat steps 1-3 with that handle.

Why is the media query exactly 1000px and not the standard 768px?

The standard breakpoint of 768px covers phones and small tablets. But 9-10 inch tablets in portrait mode (~800px) still suffer from animations, as their processor power and Wi-Fi bandwidth aren't sufficient for smooth rendering. The 1000px threshold covers all tablets, leaving animations only for full desktops. If you prefer, you can lower it to 768px: just replace 1000 in the CSS with your value.

Is this even necessary in 2026 when all smartphones have flagship processors?

The gap between flagships and budget devices is still enormous. According to Statcounter data for 2026, one third of mobile traffic comes from devices with less than 2 GB of RAM. Plus mobile networks: in regions outside major cities, speeds are often below 5 Mbps. Every kilobyte of animations saved reduces time to first interaction by 100-300 ms, and that directly correlates with conversion.

Can I do the same thing through a plugin instead of code in functions.php?

Yes, but we don't recommend it. Every extra plugin adds its own overhead, and for a 15-line task that's overkill. If you're afraid of code, install the free Code Snippets plugin, paste the code there (it has a checkbox to enable/disable, and it's harder to make mistakes than in functions.php). A plugin specifically for deactivating animations is excessive.

To disable animations or not: final recommendation

In short: disable them on mobile. The gains in loading speed and scroll smoothness outweigh the aesthetic loss. A user visiting from their phone wants information here and now, not to wait for an animated hero block to finish loading.

The basic three-step method above fully solves the task and plays nicely with caching. Set it up once, test on a couple of pages via PageSpeed Insights, and forget about it. And if you need selective animation for specific elements, combine the approach from the video with media queries targeting specific CSS classes.

Liked this guide? Check out our other Elementor tutorials: font optimization, lazy loading widgets, and setting up breadcrumbs for custom post types.