hello all and thanks for being here, lets see if you can clarify what is wrong here:
i am trying to add a simple animation of a snowflake falling from top to bottom within a container: here link: sandbox
import "./styles.css";
const seasonArray = ["winter", "summer", "autumn"];
const getSeasonValue = (season) => {
switch (season) {
case "winter":
return winter;
case "autumn":
return autumn;
case "summer":
return summer;
default:
return summer;
}
};
const StyledButton = styled.button`
border: 1px solid black;
border-radius: 10px;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
max-width: 33%;
position: relative;
min-width: 30%;
height: 20%;
`;
const StyledButtonsWrapper = styled.div`
display: flex;
justify-content: space-between;
height: 100vh;
`;
export default function App() {
return (
<StyledButtonsWrapper>
{seasonArray.map((season) => {
return (
<StyledButton key={season} label={season}>
<SnowFlakeIcon />
{season.charAt(0).toUpperCase()}
{season.substring(1)}
</StyledButton>
);
})}
</StyledButtonsWrapper>
);
}
const StyledSvg = styled.svg`
position: absolute;
top: 0;
width: 100%
height: 100%;
animation: snowFlake 2s ease-in-out infinite;
@keyframes snowFlake {
0% {
transform: translateY(0);
}
50% {
transform:translateY(50%);
}
100% {
transform: translateY(100%);
}
}
`;
const SnowFlakeIcon = () => {
return (
<StyledSvg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m10 20-1.25-2.5L6 18" fill="#88C9F9" />
<path d="M10 4 8.75 6.5 6 6" fill="#88C9F9" />
<path d="m14 20 1.25-2.5L18 18" fill="#88C9F9" />
<path d="m14 4 1.25 2.5L18 6" fill="#88C9F9" />
<path d="m17 21-3-6h-4" fill="#88C9F9" />
<path d="m17 3-3 6 1.5 3" fill="#88C9F9" />
<path d="M2 12h6.5L10 9" fill="#88C9F9" />
<path d="m20 10-1.5 2 1.5 2" fill="#88C9F9" />
<path d="M22 12h-6.5L14 15" fill="#88C9F9" />
<path d="m4 10 1.5 2L4 14" fill="#88C9F9" />
<path d="m7 21 3-6-1.5-3" fill="#88C9F9" />
<path d="m7 3 3 6h4" fill="#88C9F9" />
</StyledSvg>
);
};
I believe that height 100% on my StyledSvg means 100% of its own height, however I seem not to be able how to handle it for the whole parent.
what am I not getting here?
You need to rearrange the DIVs containing the SVG snowflakes, so that the buttons of "seasons" precede them. And then adjust the CSS as needed, like so:
.DLsnt {
border: 1px solid black;
border-radius: 10px;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
max-width: 33%;
position: relative;
min-width: 30%;
height: 20%;
}
.cTlyjm {
display: flex;
justify-content: space-between;
height: 100vh;
}
.fgjuVP {
height: 100%;
width: 24px; /*change here*/
position: relative; /*change here, too*/
animation: snowFlake 2s ease-in-out infinite;
left: calc(-16.5%); /*the half of the max-width of the .DLsnt button*/
}
@keyframes snowFlake {
0% {
transform: translate(0%);
}
50% {
transform: translate(0, 50%);
}
100% {
transform: translate(0, 100%);
}
}<div id="root">
<div class="sc-gjcoXW cTlyjm">
<button label="winter" class="sc-FEMpB DLsnt">Winter</button>
<div class="sc-dVBluf fgjuVP">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m10 20-1.25-2.5L6 18" fill="#88C9F9"></path>
<path d="M10 4 8.75 6.5 6 6" fill="#88C9F9"></path>
<path d="m14 20 1.25-2.5L18 18" fill="#88C9F9"></path>
<path d="m14 4 1.25 2.5L18 6" fill="#88C9F9"></path>
<path d="m17 21-3-6h-4" fill="#88C9F9"></path>
<path d="m17 3-3 6 1.5 3" fill="#88C9F9"></path>
<path d="M2 12h6.5L10 9" fill="#88C9F9"></path>
<path d="m20 10-1.5 2 1.5 2" fill="#88C9F9"></path>
<path d="M22 12h-6.5L14 15" fill="#88C9F9"></path>
<path d="m4 10 1.5 2L4 14" fill="#88C9F9"></path>
<path d="m7 21 3-6-1.5-3" fill="#88C9F9"></path>
<path d="m7 3 3 6h4" fill="#88C9F9"></path>
</svg>
</div>
<button label="summer" class="sc-FEMpB DLsnt">Summer</button>
<div class="sc-dVBluf fgjuVP">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m10 20-1.25-2.5L6 18" fill="#88C9F9"></path>
<path d="M10 4 8.75 6.5 6 6" fill="#88C9F9"></path>
<path d="m14 20 1.25-2.5L18 18" fill="#88C9F9"></path>
<path d="m14 4 1.25 2.5L18 6" fill="#88C9F9"></path>
<path d="m17 21-3-6h-4" fill="#88C9F9"></path>
<path d="m17 3-3 6 1.5 3" fill="#88C9F9"></path>
<path d="M2 12h6.5L10 9" fill="#88C9F9"></path>
<path d="m20 10-1.5 2 1.5 2" fill="#88C9F9"></path>
<path d="M22 12h-6.5L14 15" fill="#88C9F9"></path>
<path d="m4 10 1.5 2L4 14" fill="#88C9F9"></path>
<path d="m7 21 3-6-1.5-3" fill="#88C9F9"></path>
<path d="m7 3 3 6h4" fill="#88C9F9"></path>
</svg>
</div>
<button label="autumn" class="sc-FEMpB DLsnt">Autumn</button>
<div class="sc-dVBluf fgjuVP">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m10 20-1.25-2.5L6 18" fill="#88C9F9"></path>
<path d="M10 4 8.75 6.5 6 6" fill="#88C9F9"></path>
<path d="m14 20 1.25-2.5L18 18" fill="#88C9F9"></path>
<path d="m14 4 1.25 2.5L18 6" fill="#88C9F9"></path>
<path d="m17 21-3-6h-4" fill="#88C9F9"></path>
<path d="m17 3-3 6 1.5 3" fill="#88C9F9"></path>
<path d="M2 12h6.5L10 9" fill="#88C9F9"></path>
<path d="m20 10-1.5 2 1.5 2" fill="#88C9F9"></path>
<path d="M22 12h-6.5L14 15" fill="#88C9F9"></path>
<path d="m4 10 1.5 2L4 14" fill="#88C9F9"></path>
<path d="m7 21 3-6-1.5-3" fill="#88C9F9"></path>
<path d="m7 3 3 6h4" fill="#88C9F9"></path>
</svg>
</div>
</div>
</div>