Using props and animation in styled components

[alinarub]

Hello,

we have tried implementing @NikRoe's suggestion to fade out the hamburger menu overlay after clicking the close button, so it matches the opening animation (ty for that! We agree). We made two different keyframes animations and via state, we want to trigger one or the other, based on a true or false state. Our code so far looks like this:

const customAnimationIn = keyframes0% { opacity: 0; } 30% { opacity: 0.5; } 60% { opacity: 0.8; } 100% { opacity: 1; };

const customAnimationOut = keyframes0% { opacity: 1; } 30% { opacity: 0.8; } 60% { opacity: 0.5; } 100% { opacity: 0; };

animation: ${({ $hamburgerOpen }) =>
$hamburgerOpen
? ${customAnimationIn} 100ms ease-in-out forwards;
: ${customAnimationOut} 100ms ease-in-out forwards;};

With our prop $hamburgerOpen we try to pass on the state with the same name (without the $).

This is our error message:

We will also later have to implement a time out function so that our close button doesn't react abruptly.

Thanks in advance for your ideas!

[NikRoe]

Hi there,

the error message suggests that in addition to the keyframe helper, you will also need the css helper from styled-components.
Those lines of code would then look like this:

${({ $hamburgerOpen }) => css`
    animation: ${$hamburgerOpen ? customAnimationIn : customAnimationOut} 100ms
      ease-in-out forwards;
  `}

don't forget to import { css } from "styled-components"

Hope this already enables you to take the next steps in finding a great fade out animation :)

[gregorsart]

Thank you very much Niklas ✨  so cool 😊