Animations very laggy / choppy on iOS

[jbiggs1981]

Hi there,

I have a few animations on my site:

Welcome to Active Edge Chiropractors in Canmore, Alberta

The animations work great on desktop computers and Android phones. However on IOS they are very delayed and choppy.

You can see this by going to that site mentioned above on an iOS phone and scrolling down, the three boxes are supposed to slide in but they don’t really.

Any idea what’s going on there?

[charlie]

It looks like your effects are not starting in the exited state, but the markup looks fine. Can you send me a screenshot of your effect setup? I’d try increasing the top offset here, and try it with behavior reset. Let me know how it goes.

[jbiggs1981]

Okay I’ve increased the top offset and also set behaviour reset.

Same behaviour.

[charlie]

Okay I’m seeing it more on that animation in particular. Hard to even tell if offset helps, but I’d try a negative offset too and see if that helps. Backface “hidden” might help as well. “Fade In Up” in particular seemed like it was moving the container or something like that. We’ll be taking a pass at animations there’s been a couple of users report issues with animations specifically with mobile.

[jbiggs1981]

Is there anyway to disable animations on mobile?

[charlie]

Try something like this either on global CSS or page CSS and have a great weekend!

@media (max-width: 480px) {
  * {
    animation: none !important;
    transition: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-timing-function: linear !important;
    animation-fill-mode: forwards !important;
  }
}