Infinity
Infinity
PostsComments
KPCKevin Powell - Community
Created by Infinity on 2/25/2024 in #front-end
Disabling CSS Animations on Lower End Devices (Is this a good idea?)
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.
5 replies
KPCKevin Powell - Community
Created by Infinity on 2/25/2024 in #front-end
Disabling CSS Animations on Lower End Devices (Is this a good idea?)
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);
}
5 replies