CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
GCnomore
GCnomore

Reputation: 136

Styled component animation with props

Here's what I'm trying to accomplish:

const fallOff = keyframes`
   0% {
    transform: translateY(0px);
    opacity: 1;
   }
   80% {
    opacity: 0;
   }
   100% {
    transform: translateY(120vh);
    opacity: 0;
   }
`;

export const Tiles = styled.div<{
  size: number;
  delay: number;
  fallOff: boolean;
}>`
  width: ${({ size }) => size - 4}px;
  height: ${({ size }) => size - 4}px;
  border: 1px #343434 solid;
  background-color: #191919;

  animation: ${(props) =>
    props.fallOff ? `${fallOff} 1.5s ease-in forward` : null};
  animation-delay: ${({ delay }) => (delay === 1 ? 0 : `${delay + 0.5}s`)};
`;

I have multiple tiles and their fallOff animatino will be triggered by the value fo fallOff. Each of them will get animation-delay per each of their delay value accordingly. When I run this, I'm getting Uncaught Error: It seems you are interpolating a keyframe declaration (jGNlbV) into an untagged string.

Upvotes: 2

Views: 1066

Answers (1)

Ivan Popov
Ivan Popov

Reputation: 696

Try it. It Will be work. Take out the choice of the name of the animation in a separate property.

    const Tiles = styled.div<{
      size: number;
      delay: number;
      fallOff: boolean;
    }>`
      width: ${({ size }) => size - 4}px;
      height: ${({ size }) => size - 4}px;
      border: 1px #343434 solid;
      background-color: #191919;
    
      animation: 1.5s ease-in forward;
      animation-name: ${(props) => props.fallOff ? fallOff : null};
      animation-delay: ${({ delay }) => (delay === 1 ? 0 : `${delay + 0.5}s`)};
    `;

Upvotes: 1

Related Questions