React - converting hook to not break rules of hook (calling useTransform inside a loop)

[szilardlazarsonos]

Hi everybody!
I have the following hook, but it's calling the useTransform hook inside a loop. Is there any way to refactor it without breaking the rules-of-hook? (using a non-hook (transform?) function or IDK)

Thanks in advance!

import { SanityAnimation } from '@sonos-inc/web-lib-types'
import { MotionProps, useTransform, useViewportScroll } from 'framer-motion'

export const useSanityScrollAnimations = (
  scrollStart: number,
  scrollEnd: number,
  animations?: Array<SanityAnimation & { startOffset?: number }>
): MotionProps['style'] => {
  try {
    if (animations?.length) {
      return Object.fromEntries(
        animations.map((a) => {
          const { animation, direction, value } = a
        
          // eslint-disable-next-line react-hooks/rules-of-hooks
          const { scrollYProgress } = useViewportScroll()

          // eslint-disable-next-line react-hooks/rules-of-hooks
          const rawValue = useTransform(
            scrollYProgress,
            [scrollStart, scrollEnd],
            [direction === 'from' ? value : 0, direction === 'to' ? value : 0]
          )

          // eslint-disable-next-line react-hooks/rules-of-hooks
          const percent = useTransform(rawValue, (val) => `${val ?? 0}%`)

          return [animation, percent]
        })
      )
    }
  } catch (e) {
    console.error('Error in useSanityScrollAnimations:\n', e)
  }

  return {}
}