React change css variables from react component for css keyframes

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)

score 1 · Accepted Answer · answered Nov 17 '22 at 07:19

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

React change css variables from react component for css keyframes

1 Answers1