Stop Animations on Mobile

grace171 · January 2023

Hello,

Is there a way to turn off entrance animations for mobile only? I love the way they look on desktop, but they do not look smooth on mobile (they abruptly appear versus fading in, which seems like a mistake). Here is my website: https://graceestle.com/. The homepage is a great example of what I mean.

Thanks,

Grace

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

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

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

grace171 · February 2023

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

Stop Animations on Mobile

Comments