How to have an initial animation based off of window width in React?

[mattbal]

Hi,

I'm creating an online card game and I'm trying to animate my cards, so that when one is selected, they all collapse down into the middle:

To do this, I wrote some simple code:

// Card.tsx
<motion.button
  initial={{
    marginLeft: zIndex === 10 ? undefined : '-3rem', // zIndex 10 = first card
    // ... code for animating y ommitted
  }}
  animate={{
    marginLeft: wonCard ? (zIndex === 10 ? undefined : '-7.5rem') : undefined,
    // ... rest of code for scaling and opacity fading omitted
  }}
>
  // ... rest of card code

Basically, each card (except for the first one) is designed to overlap with the card to its left. Then, when a card is selected, I update the wonCard variable, triggering a re-render of the component, and causing the marginLeft to animate to the width of each card (7.5rem), creating an effect of all the cards collapsing down to the center.

The problem I'm running into is that I want the cards to be a different size and with a different overlap, depending on the screen size.

My first idea was to use window.innerWidth to get the window's width. The problem with this is, it doesn't work anymore with React's Server Side Rendering. The component ends up getting rendered first on the server, where window doesn't exist, so it ends up throwing an error. To get around this, I wrote a custom hook that gets the window width after the component has been rendered on the client.

// hooks.tsx
type WindowDimensions = {
  width: number | undefined;
  height: number | undefined;
};

export function useWindowDimensions() {
  function getWindowDimensions() {
    return {
      width: window.innerWidth,
      height: window.innerHeight,
    };
  }

  const [windowDimensions, setWindowDimensions] = useState<WindowDimensions>({
    width: undefined,
    height: undefined,
  });

  useLayoutEffect(() => {
    setWindowDimensions(getWindowDimensions());

    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return windowDimensions;
}

Then inside my card component, I get the width and use it to update the marginLeft accordingly:

// Card.tsx
const { width } = useWindowDimensions();

function getInitialWidth(width: number | undefined) {
  if (width === undefined) return undefined;

  if (width < 480) {
    return '-2rem'
  } else {
    return '-3rem'
  }
}

function getToWidth(width: number | undefined) {
  if (width === undefined) return undefined;

  if (width < 480) {
    return '-4rem'
  } else {
    return '-7.5rem'
  }
}

return (
  <motion.button
    initial={{
      marginLeft: zIndex === 10 ? undefined : getInitialWidth(width),
    }}
    animate={
      marginLeft: wonCard ? (zIndex === 10 ? undefined : getToWidth(width)) : undefined,
    }}
  >
)

The problem is my window dimensions hook has to wait until the first render before getting the width. So the card initially renders with undefined width, causing there to be no overlap. Which is not what I want.

To get around this, I thought about using the key property to trigger a re-render after the width property updates. But the problem is, when the cards load in, I'm not just animating the marginLeft property, I'm also animating the y property, so if I use a key, the component will accidentally drop down again, which is not what I want.

The only other solution I could think of was using the useAnimate hook, so that I can manually animate just the marginLeft property after the width changes.

// Card.tsx
const { width } = useWindowDimensions();
const [scope, animate] = useAnimate();

function getInitialWidth(width: number | undefined) { // ... }

function getToWidth(width: number | undefined) { // ... }

useEffect(() => {
  if (wonCard) {
    animate(scope.current, {
      marginLeft: zIndex === 10 ? undefined : getToWidth(width),
    });
  } else {
    animate(scope.current, {
      marginLeft: zIndex === 10 ? undefined : getInitialWidth(width),
    });
  }
}, [width]);

return (
  <motion.button
    ref={scope}
  >
)

But then I end up getting this effect, where it's initially rendered with no overlap and quickly changes to an overlap.

So my question is: is there a way to animate marginLeft using the window width, without having to wait one render before rendering the correct overlap?

Any help would be appreciated.

[mattgperry]

Is it possible to use CSS @media to style the initial view and then animate from there?

[mattbal]

Thanks for the suggestion. I just tried doing that, but for some reason the marginLeft now animates weird. Any ideas why that might be happening?

// Card.tsx
const { width } = useWindowDimensions();

function getToWidth(width: number | undefined) {
  if (width === undefined) return undefined;

  if (width < 480) {
    return '-4rem';
  } else {
    return '-7.5rem';
  }
}

return (
  <motion.button
    animate={{
      marginLeft: wonCard ? (zIndex === 10 ? undefined : getToWidth(width)) : undefined,
      // scale and opacity animation stuff omitted
    }}
    transition={{
      marginLeft: {
        duration: 0.8,
        delay: 3.4,
        ease: [0.4, 0, 0.2, 1],
      },
    }}
    className={`aspect-[0.675] w-16 md:w-[7.5rem] rounded-lg ${zIndex === 10 ? '' : 'card-overlap'}`}
  >
    // ... rest of card
)

// styles.css
.card-overlap {
  margin-left: -2rem;
}

@media (min-width: 768px) {
  .card-overlap {
    margin-left: -3rem;
  }
}

[mattbal]

OK, I figured out two solutions:

1. Render nothing until first render has passed, then get the width, and then render everything

// hooks.tsx

import { useEffect, useState } from 'react';

export function useScreenWidth() {
  const [width, setWidth] = useState<undefined | number>(undefined);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }

    handleResize();

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return width;
}

// App.tsx

export default function Home() {
  const width = useScreenWidth();
  const [canShow, setCanShow] = useState(false);

  useEffect(() => {
    if (width !== undefined && !canShow) {
      setCanShow(true);
    }
  }, [width, canShow]);

  return (
    <>
      {canShow && (
        // ... rest of your markup here
      )}
    </>
  )
}

2. Use css variables (the option I went with)

Idea from this video: https://www.youtube.com/watch?v=xSuxsfn13xg

// Card.tsx

const variants = {
  initial: {
    marginLeft: zIndex === 10 ? undefined : 'var(--card-marginLeft-initial)',
  },
  animate: {
    marginLeft: wonCard
      ? zIndex === 10
        ? undefined
        : 'var(--card-marginLeft-animate)'
      : undefined,
  },
};

return (
  <motion.button
    variants={variants}
    initial='initial'
    animate='animate'
    className='aspect-[0.675] w-16 md:w-[7.5rem] rounded-lg [--card-marginLeft-initial:-2rem] xs:[--card-marginLeft-initial:-3rem] [--card-marginLeft-animate:-4rem] xs:[--card-marginLeft-animate:-7.5rem]'
  >
    // ...
)

I'm using TailwindCSS so I used Tailwind's arbitrary values to do the CSS variables, but you could also define them in a regular .css file.