How to move an element in opposite direction onWheel event using along with "@react-spring"

[rahul3v]

I want to scroll an element along the -ve direction onWheel event smoothly,

 const [style, api] = useSpring(() => ({
    x: 0,
    y: 0,
    scale: 1,
    rotateZ: 0
  }));

const bind = useGesture(
    {
      onWheel: (state) => {
        let {
          lastOffset: [ox, oy],
          movement: [mx, my],
          distance: [dix, diy],
          direction: [dx, dy],
          offset: [x, y],
        } = state;
        api.start({ x, y })
      })

[dbismut]

If you want help, you need to explain the problem in much much more details. Open source is not a hotline.

[rahul3v]

well,
As an example I want a div element to move/translate along xy-axis as per wheel scroll smoothly, it works fine with above code but I need to change the direction of the movement/translation

Here is the sample example

import React, { useEffect, useRef } from "react";
import { useSpring, animated } from "@react-spring/web";
import { useGesture } from "@use-gesture/react";

export default function App() {
  const target = useRef<HTMLElement | null>(null);

  useEffect(() => {
    target.current = document.body;
    const handler = (e: Event) => e.preventDefault();
    document.addEventListener("gesturestart", handler);
    document.addEventListener("gesturechange", handler);
    document.addEventListener("gestureend", handler);

    
    return () => {
      document.removeEventListener("gesturestart", handler);
      document.removeEventListener("gesturechange", handler);
      document.removeEventListener("gestureend", handler);
    };
  }, []);

  const [style, api] = useSpring(() => ({
    x: 0,
    y: 0,
    scale: 1,
    rotateZ: 0,
  }));
  const ref = React.useRef<HTMLDivElement>(null);

  useGesture(
    {
      onWheel: (state) => {
        let {
          lastOffset: [ox, oy],
          movement: [mx, my],
          distance: [dix, diy],
          direction: [dx, dy],
          offset: [x, y],
          delta: [ddx, ddy],
          xy: [ax, ay],
        } = state;
        api.start({ x, y })
      },
    },{
      target
    }
  );

  return (
    <div className={`flex fill center container`}>
      <animated.div
        className="card"
        ref={ref}
        style={style}
      ></animated.div>
      <style>{`
      html,
      body,
      #root ,
      #__next{
        height: 100%;
        width: 100%;
        overscroll-behavior-x: none;
      }
      
      body {
        font-family: system-ui, sans-serif;
        min-height: 100vh;
        margin: 0;
      }
      
      *,
      *:after,
      *:before {
        box-sizing: border-box;
      }
      
      .flex {
        display: flex;
        align-items: center;
      }
      
      .flex.fill {
        height: 100%;
      }
      
      .flex.center {
        justify-content: center;
      }

      .card {
        position: relative;
        width: 300px;
        height: 300px;
        background: white;
        border-radius: 5px;
        box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.3);
        will-change: transform;
        cursor: grab;
        touch-action: none;
        user-select: none;
        padding: 20px;
      }
      
      `}</style>
    </div>
  );
}

I want the animated div block to move opposite direction instead of the actual one on wheel gesture, just that
Hope that might clear the problem now

[dbismut]

Why don't you use start({ x: -x, y: -y }) ?

[rahul3v]

yup, that's working, I was playing around with other values to set the x, y values, my bad :)