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.
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`)};
`;