How to change animation on screen width threshold

Question

I'm currently using the data-aos attribute to apply the "fade-up-right" animation to an element in my web page, like this:

<div className="des__Container" data-aos="fade-up-right">

Now, I want to change the animation specifically when the screen width is at its maximum of 768 pixels.

Is it possible to conditionally modify this animation based on the screen width? If not, are there any alternative solutions or best practices for achieving this?

Any guidance would be greatly appreciated. Thanks in advance!

Answer 1

You can create a custom hook called useWindowSize which gives you width of the window and then inside your div, you can conditionally add/remove data-aos:

Code for hook:

import { useState, useEffect } from "react";
export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window?.innerWidth,
    height: window?.innerHeight
  });

  useEffect(() => {
    // Function to update the window size
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    // Add event listener to listen for window resize
    window.addEventListener("resize", handleResize);

    // Clean up the event listener on component unmount
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []); // Empty dependency array ensures the effect runs only on mount and unmount

  return windowSize;
}

Code sandbox: https://codesandbox.io/s/fervent-flower-8gln2c?file=/hooks/useWindowSize.js:0-758

Answer 2

You can achieve this by adding CSS media queries to the animation. You can try the following code:

    /* Default animation for screen widths below 768px */
.des__Container {
  animation: fade-up-right 1s ease both;
}

/* Custom animation for screen widths of 768px and above */

@media (min-width: 768px) {
  .custom-animation {
animation: your-custom-animation 1s ease both;
 }
}

Answer 3

Yes,

@media (max-width: 768px) {
    .des__Container {
        animation-name: fade-different-animation;
    }
}

@media (min-width: 769px) {
    .des__Container {
        animation-name: fade-up-right;
    }
}

you can conditionally modify the animation using medial Queries.