Useful Snippets

Useful Snippets


This blog is used to collect useful snippets related to Linux, PHP, MySQL and more. Feel free to post comments with improvements or questions!

July 2020
M T W T F S S
 12345
6789101112
13141516171819
20212223242526
2728293031  

Categories


Disable CSS3 animations for iOS devices in Visual Composer

Stanislav KhromovStanislav Khromov

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

Web Developer at Aftonbladet (Schibsted Media Group)
Any opinions on this blog are my own and do not reflect the views of my employer.
LinkedIn
Twitter
WordPress.org Profile
Visit my other blog

Comments 19
  • Connie
    Posted on

    Connie Connie

    Reply Author

    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


    • Stanislav Khromov
      Posted on

      Stanislav Khromov Stanislav Khromov

      Reply 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.


      • Dave Wynne
        Posted on

        Dave Wynne Dave Wynne

        Reply Author

        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.


  • perplexed
    Posted on

    perplexed perplexed

    Reply Author

    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!


    • Stanislav Khromov
      Posted on

      Stanislav Khromov Stanislav Khromov

      Reply 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!


      • perplexed
        Posted on

        perplexed perplexed

        Reply Author

        Hello Stanislav Khromov,

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


        • Stanislav Khromov
          Posted on

          Stanislav Khromov Stanislav Khromov

          Reply Author

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

          Hope that helps!


        • Stanislav Khromov
          Posted on

          Stanislav Khromov Stanislav Khromov

          Reply 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.


  • perplexed
    Posted on

    perplexed perplexed

    Reply Author

    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!


  • perplexed
    Posted on

    perplexed perplexed

    Reply Author

    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?


    • Stanislav Khromov
      Posted on

      Stanislav Khromov Stanislav Khromov

      Reply 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.


  • Wesley Mathew
    Posted on

    Wesley Mathew Wesley Mathew

    Reply Author

    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


    • Stanislav Khromov
      Posted on

      Stanislav Khromov Stanislav Khromov

      Reply 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?


  • Wesley
    Posted on

    Wesley Wesley

    Reply Author

    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


    • Stanislav Khromov
      Posted on

      Stanislav Khromov Stanislav Khromov

      Reply 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!


  • Iggy
    Posted on

    Iggy Iggy

    Reply Author

    seems to work, big thank!


  • subexpression
    Posted on

    subexpression subexpression

    Reply Author

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


  • Deniz
    Posted on

    Deniz Deniz

    Reply Author

    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!!