multiple animation

[claud-io]

Hello, i think i'm doing something wrong using spring animations.
i've create multiple spring objects that start from a fixed place in the window, then they move to an y and after that they restart this cycle from the bottom of the page.
This is kinda working, but there is a second movement triggered by the mouse move that move this element kinda like the 'wind' or similar shifting to left-right /top-bottom

`
const Element = ({ from, type, src, notify, magicOffset, targetY, resetY, }) => {

const appHeight = document.getElementById('app').clientHeight;
const innerWidth = window.innerWidth;
const fromX = from.x * innerWidth
const fromY = from.y * appHeight
const itemType = itemTypes.get(type)


document.getElementById('el').style.maxHeight = `${appHeight + magicOffset}px`
document.getElementById('el').style.height = `${appHeight + magicOffset}px`


const [{ x, y }, set] = useSpring(() => ({
    onFrame: ({ y }) => {
        if (y < resetY) {
            set({ reset: true, from: { y: appHeight + 100, x: fromX }, to: { y: targetY, x: fromX } })
        }
    },
    config: itemType.config, //this is something like { mass: 150, tension: 7, friction: 150 }
    to: { y: targetY, x: fromX },
    from: { y: fromY, x: fromX }
}))


const mouseMoveHandler = ({ deltaX, deltaY, clientX }) => {
    const distanceFactor = 0.1 + Math.abs(clientX - x.value) / 500
    const shiftX = (deltaX * 100 * itemType.mouseConv) / distanceFactor
    if(Math.abs(shiftX) > innerWidth){
        return
    }
        
    

    let _targetY = targetY
    if (deltaY < 0) {
        _targetY = 7000
    } else if (deltaY > 0) {
        _targetY = -6000
    }


    set({ reset: false, x: x.value - shiftX, y: _targetY })

}

const mouseLeaveHandler = () => {
    set({ reset: false, y: targetY })
}

useEffect(() => notify(mouseMoveHandler, mouseLeaveHandler), []);

return ReactDOM.createPortal(
    <animated.img style={{ position: 'absolute', width: `${itemType.width}px`, transform: transform([x, y]) }} src={src} />
    , document.getElementById('el')
);

}
`

in the mouseMoveHandler is set the new x and y to simulate the wind effect, but the x movement is not smooth like the y one.

Can someone help me?

also, is there is a better mode to reset the effect once reaching the y target?

Thanks.