Lag during the start of animation

[eden-lane]

I'm having a problem while trying to tweak performance of my animation. At the beginning of the animation there is a little lag which is consistent. See gif: https://share.cleanshot.com/IVeQJc

I've done a performance analysis and noticed that there is a "long task" warning and "composite layers" at the flame chart graph.
What could be the problem?

P.S. Tried to use "will-change" property, but it didn't help

Here is my code:

const [currentStep, setCurrentStep] = useState(0);
  const [completedStep, setCompletedStep] = useState(0);

  const springsRef = useSpringRef();

  const props = useSprings(STEPS.length, STEPS.map((step, i) => {
      return {
        ref: springsRef,
        transform: `translate3d(${i * 100}%, 0, 0)`,
        opacity: i === currentStep ? 1 : 0,
        scale: i === currentStep ? 1 : 0.8,
        isVisible: i === currentStep,
      }
    }),
  );

const handleNext = () => {
    setCurrentStep(step => step + 1);
    springsRef.start(step => {
      const transform = `translate3d(${(step - currentStep - 1) * 100}%, 0, 0)`;
      const opacity = currentStep + 1 === step ? 1 : 0;
      const scale = currentStep + 1 === step ? 1 : 0.8;

      return {
        transform,
        opacity,
        scale,
        onRest() {
          if (step === currentStep + 1) {
            setCompletedStep(step);
          }
        }
      };
    });
  };

[joshuaellis]

This is going to be nearly impossible to accurately help with without the repo.

However, I would assume that something is blocking your main thread.