Stop Animations on Mobile

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

Comments

  • 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

  • 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

  • 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

  • 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

  • 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

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

Sign In or Register to comment.