Animating text in scroll html or scroll in ScrollControls

Questions
, ,
1

So, in <ScrollControls/> there are two types of it. Canvas in Scroll and DOM in Scroll, but the thing is that I can’t animate the DOM in Scroll using the useIntersect that is implemented in Canvas Scroll.

Here is the code.
This one is for Canvas in Scroll Items.

const Item = ({ index,position,scale,c = new THREE.Color(),...props }) => {
    
    const visible = useRef(false)
    const ref = useIntersect((isVisible) => (visible.current = isVisible))
    const { clicked } = useSnapshot(state)
    const [hovered, hover] = useState(false)
    const click = () => (state.clicked = index === clicked ? null : index)
    const over = () => hover(true)
    const out = () => hover(false)

    useFrame((state,delta) => {
        ref.current.material.zoom = damp(ref.current.material.zoom, visible.current ? 1 : 1.5, 1, delta)
        ref.current.material.scale[1] = ref.current.scale.y = damp(ref.current.scale.y,  visible.current ? 7 : 1, 1, delta)
        ref.current.material.scale[0] = ref.current.scale.x = damp(ref.current.scale.x,  visible.current ? 5 : 1, 1, delta)
        ref.current.material.grayscale =  hovered || clicked === index ? 0 : 1
    })

    return <>
        <Text fontSize={0.8} {...props} position={[position[0] - 4,position[1],position[2]]} color={0xffffff} anchorX="center" anchorY="middle">
            NSFW 101!
        </Text>
        <Image ref={ref} {...props} position={position} scale={scale} onClick={click} onPointerOver={over} onPointerOut={out} />
    </>
}

And this one is for the DOM, but I can’t make animation work, because what I really want to happen for now is that, when the animation works in Canvas at the image, the same for DOM h1 will scale up too.

const ItemHtml = ({ index,name }) => {

    const visible = useRef(false)
    const ref = useIntersect((isVisible) => (visible.current = isVisible))
    useFrame((state,delta) => {
        ref.current.style.scale =  ref.current.style.scale = damp(ref.current.style.scale,  visible.current ? 7 : 1, 1, delta)
    })

    return <>
        <h1 
            ref={ref}
            style={ 
            { 
                position: 'absolute',
                top: `${75 + 100 * index}vh`,
                left: '10vw',
                fontSize:'35px',
                color: 'white'
            } 
        }>
            { name } 
        </h1>
    </>
}

And here is the demo.