Stop Animations on Mobile

Comments

• Phil

  January 2023

  Hi,

  There is no setting to do that, but you can try the following CSS code:

  @media only screen and (max-width:767px){
     .animate{
        opacity: 1!important;
        transform: none!important;
     }
  }
  

  Please, put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

  
  

  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• grace171

  January 2023

  Hello,

  I just implemented your fix, cleared my cache, and opened the page in an incognito window. The animations are still appearing. Does it take a while for the settings to go live?

  Thanks,

  Grace
• Phil

  January 2023

  Please, try to use the following CSS instead:

  @media only screen and (max-width:767px){
    .animate{
       opacity: 1!important;
       transform: none!important;
       -webkit-transform: none!important;
       -moz-transform: none!important;
       -o-transform: none!important;
    }
  }
  

  Best regards

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• grace171

  February 2023

  Hello,

  I tried your newest CSS, cleared my cache, and opened the page in an incognito window. The animations are still appearing. Are you seeing the same thing?

  -Grace
• Phil

  February 2023

  Last try:

  @media only screen and (max-width:767px){
    .animate{
       animation-name: unset !important;
  -webkit-animation-name: unset !important;
  -moz-animation-name: unset !important;
  -ms-animation-name: unset !important;
  -o-animation-name: unset !important;
    }
  }
  

  If this does not work, I will not be able to help further, unfortunately.

  
  

  Best regards

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• grace171

  February 2023

  Thanks so much! This didn't work entirely, but the animations look better.