how to use css helpers from styled-components?

[bogdanq]

error - It seems you are interpolating a keyframe declaration (krDXiq) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css`` helper which ensures the styles are injected correctly

const style = {
  rollin: css`
    animation-name: ${({ isAnimated }) => (isAnimated ? rollinIn : scaleOut)};
  `,
  zoom: css`
    animation-name: ${({ isAnimated }) => (isAnimated ? zoomIn : scaleOut)};
  `,
};

 <SomeComponent style={style[name]} />

[shilman]

See here? #7540

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[bogdanq]

#7540 this option does not work. A problem with keyframes in storybook.
If you do everything in the ModalForCustomAnimate component, there will be no error,

const zoomIn = keyframes`
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }

const animationCustomStyle = {
  zoom: css`
    border: 1px solid red;
    animation-name: ${({ isAnimated }) =>
      isAnimated ? rollinIn : scaleOut};
  `,
}

const scaleOut = keyframes`
  0% {
    opacity: 1;
    transform: scale(1)
  }
  100% {
    opacity: 0.5;
    transform: scale(0.5)
  }
`
const rollinIn = keyframes`
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

const ModalForCustomAnimate = ({ customAnimationName, ...props }) => {
  return (
    <>
      <Modal
        /*here is a mistake*/
        customAnimation={animationCustomStyle[customAnimationName]}
        {...props}
      >
        {({ closeModal }) => (
          <div>
            <h1>Modal with custom animation</h1>
            <button onClick={closeModal}>Close</button>
          </div>
        )}
      </Modal>
    </>
  )
}

link for Modal component

link fot styled modal wrapper

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!