Kevin Powell - Community•8mo ago

Disabling CSS Animations on Lower End Devices (Is this a good idea?)

Hi! I have a general design question on whether disabling css animations on devices with poor performance is a good pattern to follow or would be considered a bandaid fix to underlying performance issues. I'll provide an example scenario with using Interaction Observer and a blur + translate animation to animate elements appearing on user scroll in the thread. That is one scenario I'm running into where it lags on slower devices (for instance even my M1 macbook when on low battery) so I'm wondering if there's a reliable way to get a performance measure and disable the animation based on this.

3 Replies

Infinity•8mo ago

For instance I had a blur + translate animation on scroll for some elements so they swipe in and unblur as the user scrolls them into view: JS

  useEffect(() => {
    const hiddenElements = document.querySelectorAll(".hidden");
    observerRef.current = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        entry.target.classList.toggle("visible", entry.isIntersecting);
      });
    });

    hiddenElements.forEach((el) => observerRef.current?.observe(el));

    return () => {
      if (observerRef.current) {
        hiddenElements.forEach((el) => observerRef.current?.unobserve(el));
      }
    };
  }, []);

  useEffect(() => {
    const hiddenElements = document.querySelectorAll(".hidden");
    observerRef.current = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        entry.target.classList.toggle("visible", entry.isIntersecting);
      });
    });

    hiddenElements.forEach((el) => observerRef.current?.observe(el));

    return () => {
      if (observerRef.current) {
        hiddenElements.forEach((el) => observerRef.current?.unobserve(el));
      }
    };
  }, []);

CSS

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(-100%, 0, 0);
  transition: all 0.5s;
}

.visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(-100%, 0, 0);
  transition: all 0.5s;
}

.visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

I have also read a bit about blur not being very performant on devices with weaker GPUs hence why I'm wondering if there's anything I can do to make it lag less on those devices instead of just disabling it all together.

missymae•8mo ago

I don't know if there is a reliable way. There are libraries for device detection, but I think most rely on useragent.platform, which is deprecated (and shares if the user is Android or iOS). navigator.deviceMemory and .gpu exist. I had to disable animations based on screen size recently, so would also like to find a better solution.

Choo♚𝕂𝕚𝕟𝕘•8mo ago

Instead of trying to detect devices with poor performance, use a media query for prefers-reduced-motion to disable animations. This is primarily intended for people who get nauseous, get headaches, or have seizures in response to excessive movement/flashing, but someone with poor performance may also choose to reduce motion for performance.

Gaming

Programming

Disabling CSS Animations on Lower End Devices (Is this a good idea?)