React change css variables from react component for css keyframes - css

Question

I want to create a component called CarouselItem which is functioning as an object within a carousel display, I want these items to have different opacities depending on how close to the middle of the carousel they are and fade to fully opaque when hovered over, to do this i need the CSS to be able to access a variable of the component state to see how opaque they should be before they are hovered. I read this other post on stackoverflow which talks about using an arrow function to create a style and use that in the react style but because i want to include keyframes I'm not sure how i would implement this. Any ideas on how to implment or other solutions that may work?
CSS used in fade in animation
.fade {
animation: fade-in-keyframes 2s;
}
#keyframes fade-in-keyframes {
from {opacity: 0}
to {opacity: 1}
}
(the from portion of the fade in keyframes section should use the variable from the react component instead of 0)

Answer 1

you can easily use styled-components. You can pass your component state as a prop to your CSS. it's very easy to use and I actually have code that I think could help you a lot
I will share the link with you
CodeSandBox
if you go to my styled.js file you will see my code
You can write a function that will generate keyframes based on your props. I think it will help a lot on this matter
const WaterDrop = styled.div`
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: linear;
// this is the part that you you send the data as props to use it on your css
animation-name: ${({ keyFrameStep }) => goDownKeyFrame(keyFrameStep.start,
keyFrameStep.end)};
`;
this is how you pass you data
<WaterDrop keyFrameStep={keyFrameStep} />
and this the function I used to generate different keyframes based on my needs
const goDownKeyFrame = (start, end) => {
if (start > end) {
return keyframes`
0% {
top: ${
circleHeightWidth *
(totalAmountOfCircle % 2 === 0 && totalAmountOfCircle === start
? start - 1
: start) +
circleVerticalMargin * (2 * start - 1)
}px;
background-color: white;
border-radius: ${borderRadius}px;
}
50%{
background-color: white;
}
100% {
top: ${
circleHeightWidth * end + circleVerticalMargin * (2 * end + 1)
}px;
border-radius: ${borderRadius}px;
background-color: rgb(255,116,0);
}
`
} else if (start < end) {
return keyframes`
0% {
top: ${
circleHeightWidth * (start + 1) +
circleVerticalMargin * (2 * start + 1)
}px;
border-radius: ${borderRadius}px;
}
50%{
border-radius: 0px ${borderRadius}px ${borderRadius}px;
}
100% {
top: ${
circleHeightWidth * end + circleVerticalMargin * (2 * end + 1)
}px;
border-radius: ${borderRadius}px;
}
`
}
}
the js file won't work if you want see how it is work I strongly suggest to check out my codesandbox link
if you use Replit or StackBlitz
Replit
Stack Blitz