staggerAnimation.js

// animationValue is a number from 0 to 1, generated by a tweener
// In this case, I'm using a useAnimation hook.
function calculateAnimationValue(animationValue, arcLength, arcStart) {
  // Figure out where the animation starts
  const animationStart = arcStart / 360;
  
  // If our arc starts after where the animation currently is, return 0
  // This renders an invisible arc.
  if (animationValue < animationStart) {
    return 0;
  }
  
  // If the animation value is after the arc's end, show the entire arc.
  if (animationValue >= animationStart + arcLength / 360) {
    return 1;
  }
  
  // Return the tweened value scoped to this arc.
  return (animationValue - animationStart) / (arcLength / 360);
}