use-gesture | tied mouse/touch gestures | Frontend Framework library

I'm currently playing around with Flutter and came across an issue where I need your help. I already googled a lot, but missing terms or there is none...

I have a wheel that can be rotated around the center of the wheel (actually of the Container) using a GestureDetector. This is fine so far and works great. However, I'd like to place the wheel on the left, so that half of it is off screen.

What I have ---------------+--- What I want to achieve

The wheel should still be spinnable around its center, so that the covered colors will be revealed again.

Your help is highly appreciated!

The code I use so far is basically taken from here: How to use GestureDetector to rotate images in Flutter smoothly?

I would like to be able to drag an object across a plane (think of a piece on a chess board) in a canvas using React-three-fiber and an orthographic camera.

Here is an example (not mine) of that working with a fixed camera position: https://codepen.io/kaolay/pen/bqKjVz

But I would like to be able to move the camera too - so I have added Orbitcontrols which are disabled when the object is being dragged.

I have a code sandbox here with my attempt based many other's examples: https://codesandbox.io/s/inspiring-franklin-2r3ri?file=/src/Obj.jsx

The main code is in two files, App.jsx with the canvas, camera, and orbitcontrols. And Obj.jsx with the mesh that gets dragged as well as the dragging logic inside of a use-gesture useDrag function.

App.jsx

Drag examples in the docs such as this one are extremely fast and map very accurately to my finger position. I've tried copying the examples one-to-one but there is a clear lag to catch up with my finger position.

Here is a code sandbox example which has a clear lag when testing on a real device.

Information:

• React Use Gesture version: (I've tried all manner of combinations of versions with no impact but this is the configuration in the codesandbox)

I have been trying to get the example working from the useGesture documentation

but I keep getting a typeerror set is not a function error no matter what I try

For some reason, I just cannot get the most basic example of react-use-gesture to work. What I am trying to do is just have a square follow my mouse location when you drag it. I copy-pasted the example from their documentation multiple times (https://github.com/pmndrs/react-use-gesture) and still cannot get it to work. I just don't understand it anymore. I created a stackblitz to show you my code. What am I still doing wrong?

Stackblitz with code: https://stackblitz.com/edit/react-mg2u8p?file=src/Square.js

I will also include the most relevant code here:

I am using react-spring library, it works for me, what i want to do, i want to run 3 animation in sequence, right now all 3 animation run at a time, can we do it one by one, here i have added my whole code, can anyone please look into it, and help me to resolve that issue ? any help wll be really appreciated. if you have any other animation library can do the same thing, then please let me know

I am trying to get Emotion to play nice with Component selectors.

But when I am doing this:

I'm using a few third-party React hook libraries that aren't required for the initial render. E.g. react-use-gesture, react-spring, and react-hook-form. They all provide interactivity, which can wait until after the UI is rendered. I want to dynamically load these using Webpack's codesplitting (i.e. import()) after I render my component.

However, I can't stub out a React hook because it's essentially a conditional hook, which React doesn't support.

The 2 solutions that I can think of are:

1. Somehow extract the hook into a component and use composition
2. Force React to reconstruct a component after the hook loads

Both solutions seem hacky and it's likely that future engineers will mess it up. Are there better solutions for this?

Using react-spring and react-use-gesture I want to have a carousel animation that can be activated by dragging OR clicking on a button.

I've figured out a solution: https://codesandbox.io/s/viewpager-6o78r?file=/src/index.js

Putting a setTimeout in a loop for frames of the animation, but I feel like there must be a better way. The way I'm doing it probably isn't as smooth because I don't have easing etc. Is there a way to use the from and to properties on the springs I've already created for use by the drag gestures?