Proxy or simulate gesture to sibling elements

[devinhalladay]

Hi! Thanks for this awesome library, it seems way more user friendly than some of the alternatives!

I'm building an interaction — a PDF reader — that uses usePinch() to allow users to shrink their pages into a stack. The interaction would look something like this:

// Document.tsx houses the pinch logic
const bind = usePinch(
    ({
      origin: [ox, oy],
      first,
      movement: [ms],
      offset: [s, a],
      memo,
      event,
      args,
      ...rest
    }) => {
      return handlePinch({
        origin: [ox, oy],
        first,
        movement: [ms],
        offset: [s, a],
        memo,
        event,
        args,
        ...rest,
      });
    },
    {}
  );

  return (
    <div>
      {pages.map((_, i) => (
        <Page
          key={i}
          pagesRef={pagesRef}
          pageIndex={i}
          pages={pages}
          ref={(el) => (pagesRef.current[i] = el)}
          bind={bind}
        />
      ))}
    </div>
  );

// Page.tsx renders a page and binds a gesture handler

const Page: React.FC<Props> = React.forwardRef(
  ({ pagesRef, pageIndex, pages, bind }, ref) => {
    const [style, api] = useSpring(() => ({
      translateY: 0,
    }));

    return (
      <animated.div
        key={pageIndex}
        ref={ref}
        {...bind(pageIndex, [style, api])}
        style={style}
      >
        ...
      </animated.div>
    );
  }
);

At the moment, this code obviously binds the pinch gesture to each element individually, so I can pinch on one and it will translate up.

What I'd like to achieve, as shown in the animation above, is to somehow share state between all Pages, such that pinching any given Page will trigger a translation on all other subsequent Pages.

How would I go about achieving this? Please let me know if I can make the question more clear!

[devinhalladay]

For further reference, my end goal is to recreate something similar to this interaction from the app Liquid Text:

[dbismut]

Maybe you could bind the pinch event to the whole window rather than one individual page?

[dbismut]

Otherwise I guess you could use a state management library, the problem being that you probably don't want to trigger renders on each frame? But maybe if you store the react spring animated value that contains the zoom level you might be able to pass it down to each page?

[dbismut]

Note that what I don't like with binding each page with its own handlers is that the pinch can only happen when both fingers are touching the same single page. Which imo is not what you want.