Disable CSS3 animations for iOS devices in Visual Composer

Plugin was updated on 2014-10-28. Please use the new version below.

I’ve had huge issues with iOS devices in conjunction with Visual Composer.

When you add a lot of text and image animations, the page would crash on iPhone and iPad. So I set out to look for a way to disable CSS3 animations in VC for these devices. I found this post, which provided a solution. I wrapped it in a WordPress plugin which you can find below. Simply activate it on your site to make it run much more smoothly on iOS devices.

<?php
/*
Plugin Name: Visual Composer remove CSS3 animations
Plugin URI:
Description: Removes animations for iOS (Safari / Chrome)
Version: 2014.10.28
Author: khromov
Author URI: http://profiles.wordpress.org/khromov/
License: GPL2
*/

add_action('wp_footer', function()
{
?>
<script type="text/javascript">
/*
 * Tiny mobile detection script, courtesy of
 * https://github.com/markdalgleish/stellar.js/issues/37
 */
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

/*
 * Overwrite original vc_waypoints function
 */
function vc_waypoints()
{
    if (typeof jQuery.fn.waypoint !== 'undefined')
    {
        jQuery('.wpb_animate_when_almost_visible:not(.wpb_start_animation)').waypoint(function()
        {
            /* For iOS, we will remove the animation by just unsetting the wpb_animate_when_almost_visible class */
            if (isMobile.iOS())
                jQuery(this).removeClass('wpb_animate_when_almost_visible');
            else
                jQuery(this).addClass('wpb_start_animation');
        },
        {
            offset: '85%'
        });
    }
}
</script>
<?php
}, 100);

19 thoughts on “Disable CSS3 animations for iOS devices in Visual Composer

  1. Connie

    Hello,

    I am having with problems with the Visual Composer staff grid element on the iPad. I came across your post, but can’t find the plugin you are referring to. Is it still available?

    Thanks,
    Connie

    Reply
    1. Stanislav Khromov Post author

      Hey Connie,

      The plugin is the code block in the post. Just save all of it (Starting with “<?php” and ending in “}, 100);” as a file inside your wp-content/plugins folder.

      For example:
      wp-content/plugins/fix-visual-composer.php

      Then you can activate it through the WordPress admin, it’s called “Visual Composer remove CSS3 animations”.

      You don’t specify which issues you are having so I can’t know for sure if the plugin will help you though.

      Reply
      1. Dave Wynne

        I would like to turn off the animation on Visual Composer Addon plugin so it does not animate on mobile. Will this do it. We are using Interactive Banner 2. Any help would be so helpful!!!

        They are the 3 image boxes one is title centers and institutes.

        Reply
  2. perplexed

    Hello Stanislav Khromov,

    thank you for this post. I enabled the plug-in, but still experience a browser crash; does this apply to only Visual Composer itself, or applied as well to elements from add-on plug-ins?

    Thank You in advance!

    Reply
    1. Stanislav Khromov Post author

      Hey perplexed,

      This plugin will only affect Visual Composer elements.

      If you find a more generic snippet that works for any site, feel free to share it here!

      Reply
      1. perplexed

        Hello Stanislav Khromov,

        thank you for the reply; to clarify, would this also apply to additional elements sold separately, or only the default elements?

        Reply
        1. Stanislav Khromov Post author

          If the additional elements have the CSS class “wpb_animate_when_almost_visible” (in the frontend), then yes. Otherwise no.

          Hope that helps!

          Reply
        2. Stanislav Khromov Post author

          Hello again perplexed!

          On further investigation, there may have been edge cases where the old version of the plugin did not work. I have updated this post with a new version, feel free to try it out and see if it works better.

          Reply
  3. perplexed

    Hello Stanislav Khromov!

    Thank You for updating the code; it still gives me the same result. I used CSS to hide the body contents in an attempt to isolate the issue, and the site crashed again upon using just 1 Visual Composer element. I wonder if it may be due to an older iTouch device with an older iOS version, memory leaks, and/or another un-related issue.

    Will continue troubleshooting, and update this post as I receive additional information!

    Reply
  4. perplexed

    Hello again Hello Stanislav Khromov!

    I disabled the “responsiveness” of both the theme and Visual Composer, and still have the same result; what I find interesting is that I believe the crash to be associated with the mobile browser attempting to load the entire page (need to confirm); do you use a lazy load to help for mobile instances?

    Reply
    1. Stanislav Khromov Post author

      I don’t generally use lazy load because it doesn’t work well over 3G connections. It is also unlikely to help in this circumstance – instead of crashing immediately (without lazy load), the page will crash when you’ve scrolled down enough.

      The best way to solve this is to disable animations as per this post and also perform a full code review to find if large amounts of heavy CSS transforms are utilized across the codebase.

      Hope that helps.

      Reply
  5. Wesley Mathew

    Hi Stanislav,

    I’m trying to disable VC’s css animations when viewing our website with a mobile phone. We have several flip boxes (All in one add-on) which still need to work (box flips over when hovering) but the other images need to be static, as opposed to transitioning onto the page like they do on desktop.

    Any ideas?

    Thanks so much,

    Wesley

    Reply
    1. Stanislav Khromov Post author

      Hey Wesley,

      Since this disables VC animation effects for when an item gets into the viewport, it has no effect on VC tabs, accordions etc.

      Did you try the provided code? Does it not work as you expect?

      Reply
  6. Wesley

    Hi Stanislav,

    I used a workaround where I would make two identical sets of content, one with animations on, and one without. I would then use the responsiveness function to hide the one with animations on mobile, However, this creates duplicate content, which I don’t like. Your plugin disables animations on iOS devices, however I would like to disable animations on all mobile devices. Do you have any suggestions on how I might go about doing that? Media Query?

    Any help would be greatly appreciated.

    Kindly,

    Wesley

    Reply
    1. Stanislav Khromov Post author

      Hey Wesley!

      I noticed that a piece of the script was missing in the original post, mainly the part which detects if the visitor has a mobile device.

      I have updated the script, check it out.

      If you want to block all mobile devices, just change from:

      if (isMobile.iOS())

      to:

      if (isMobile.any())

      Hope that helps!

      Reply
  7. subexpression

    Does not work. Installed and activated the plugin, but animations show up on all mobile devices.

    Reply
  8. Deniz

    Worked like a charm – haven’t tested on iOS specifically but works on Android LG G5. Thank you so much, this is precisely what I was looking for!!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Markdown is allowed in comments.