Animation doesn't fully play unless I click and drag

[thomaslanenh]

having a weird issue with React-spring.

It seems that the animation library only correctly works a animation if I click and drag and not just click. If I just attempt to click or hover over the object it'll just play one frame on the animation and do nothing else. If I drag the canvas though while doing the action, it'll work.

Here is what I have set up in relation to reac-tspring:

function Pin(pinInfo){

    const [active, setActive] = useState(false);

    const { spring } = useSpring({
        spring: active,
        config: {mass:5, tension: 400, friction: 50, precision: 0.0001}
    })

    const scale = spring.to([0,1], [1,2]);

    const pinTexture = useLoader(TextureLoader, setPinColor(pinInfo.pinInfo.pin_color));

    return(
        <>
        <a.mesh scale={scale} onPointerEnter={() => setActive(Number(!active))} position={[pinInfo.pinInfo.pin_position.x_pos,pinInfo.pinInfo.pin_position.y_pos,0]}>
            <planeGeometry args={[5,5]}/>
            <meshBasicMaterial map={pinTexture} toneMapped={false} transparent={true}/>
        </a.mesh>
        </>
    )

Just trying to get a real simple transition animation between scale 1 and scale 1.2.

Thanks for any help!

[thomaslanenh]

I figured it out! I had to remove frameloop="demand".