如何正确使用带有clojurescript的钩子？

Question

我正在通过此链接在clojurescript中复制成帧器运动示例：

https://codesandbox.io/s/framer-motion-viewport-scroll-and-svg-path-animation-wnvxu?file=/src/Example.tsx

使用挂钩和功能组件。

export const Example = () => {

  const { scrollYProgress } = useViewportScroll();
  const yRange = useTransform(scrollYProgress, [0, 0.9], [0, 1]);
  const pathLength = useSpring(yRange, { stiffness: 400, damping: 90 });

  return (
    <>
      <ContentPlaceholder />
      <svg className="progress-icon" viewBox="0 0 60 60">
        <motion.path
          fill="none"
          strokeWidth="5"
          stroke="white"
          strokeDasharray="0 1"
          d="M 0, 20 a 20, 20 0 1,0 40,0 a 20, 20 0 1,0 -40,0"
          style={{
            pathLength,
            rotate: 90,
            translateX: 5,
            translateY: 5,
            scaleX: -1 // Reverse direction of line animation
          }}
        />

      </svg>
    </>
  );
};

这是我尝试做画圈滚动动画的过程：

(def div (.-div motion))
(def path (.-path motion))

(defn progress []
(let [
        scroll-y-progress (.-scrollYProgress (useViewportScroll))
        y-range (useTransform scroll-y-progress [0 0.9] [0 1])
        path-length (useSpring y-range {:stiffness 400 :damping 90})
        ]

     #js [y-range])

    [:> div (tw [:fixed :bg-white :bottom-0 :p-10 :border])
     [:svg (tw [:w-20 :h-20] {:viewBox "0 0 60 60"})
      [:> path {:fill "none"
                :strokeWidth "5"
                :stroke "black"
                :strokeDasharray "0 1"
                :d "M 0, 20 a 20, 20 0 1,0 40,0 a 20, 20 0 1,0 -40,0"
                :style
                {:pathLength path-length
                 :rotate 90
                 :translateX 5
                 :translateY 5
                 :scaleX -1}}]]]))

然后像这样使用进度：

[:f> progress]

在另一个最终使用rdom呈现的组件中。

但是当我滚动时，什么也没发生。为什么会这样？