Switch off on mobile?

Hey @electricfeet,

By default, the animations are off on “reduced-motion” devices or devices with that enabled, so it shouldn’t work on low-end mobiles.

Can you check on your phone if it works?

Wow, what a fast response! ??

I have an iPhone 6S, which I guess is not classed as a low-end phone.

But the reason I want to switch it off is not functional (i.e. low-end vs. high-end phones), but stylistic: I have a page with lots of columns. For an easy life, I have animated the “rows”, which are Gutenberg groups with 4 columns inside. While they animate nicely as they come into view on the desktop, on the phone — where the 4 items are stacked — it has the effect of seeming like every 4th item is animated and not the other three. So I’d like to switch off the animations altogether on the “rows”.

As I write, I realise that this is really a responsive issue, rather than specifically a mobile issue. So I guess I’m looking for a media query I could use to efficiently switch the animations off.

I tried reducing the time to zero, but the columns then just flashed into view rather than fading in. Any suggestions for an efficient CSS kill-switch?

p.s. I also spotted a typo in the dropdown list, so I created a pull request on Github.

Hey @electricfeet,

You can put the following CSS for the query to disable animations:

.animated {
    animation-duration: 0s;
}

Let me know if it helps. Thanks for the PR!

Thanks @hardeepasrani . Yes, as I said above: “I tried reducing the time to zero, but the columns then just flashed into view rather than fading in.”

Is there some javascript that is doing the “appearance”?

Hey @electricfeet,

Can you try this?

.animated {
    animation: none 0s ease-in;
}

There is some JS code, but this should fix it. Let me know if it does and then we can try something else out. ??

Hi @hardeepasrani. Unfortunately, no, that doesn’t work.

I did some more searching and testing and found that the culprit is visibility.

The animation on a fade-in takes the element from invisible to visible. Reducing the time, or changing the animation in any other way, still isn’t sufficient because CSS in any case takes it from invisible to visible as it comes into view — which the user still sees (as a flash). The key is forcing the visibility from the beginning, so nothing flashes into view like this.

So the following works for me (with some extra belt-and-braces prefixes that probably aren’t necessary any more):

/* Remove CSS animations on small screens */
@media only screen and (max-width : 599px) {
    .animated {
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
        visibility: visible !important;
    }
}

599px works for me on my theme (600px is the point at which my columns stack on top of each other) but this breakpoint will vary for others.

Thanks for your help!

Great @electricfeet for figuring out and sharing the solution with rest of the users. ??