Note that I would not recommend to do this as it basically re-rerenders the component on every event frame: it's not a major issue with a single div but you'll quickly get into perf issues with a more elaborated situation.
\nFor animation libs, you can have a look at gsap, animate.js. You'll have to manually animate the element as in:
\nconst bind = useDrag(({ target, offset: [x] }) => {\n gsap.set(currentTarget, { x })\n})\n\nreturn <div {...bind()} />
gsap has a useReact hook to make sure effects are cleaned up properly so you should probably use it when performing animations.
","upvoteCount":2,"url":"https://github.com/pmndrs/use-gesture/discussions/648#discussioncomment-8431463"}}}-
Hi there, trying to make a quick-and-dirty tech demo with a pretty tight deadline. I'm trying to build a UI that lets me resize images with a pinch gesture on mobile devices. Thanks! |
Beta Was this translation helpful? Give feedback.
-
Hi! Sure. react-spring is merely used to animate values outside of react render cycle. Any other animation lib would work, but you could also do something like: const [x, setX] = useState(0)
const bind = useDrag(({ offset: [x] }) => {
setX(x)
})
return <div {...bind()} style={{ transform: `translateX(${x}px)` }} /> Note that I would not recommend to do this as it basically re-rerenders the component on every event frame: it's not a major issue with a single div but you'll quickly get into perf issues with a more elaborated situation. For animation libs, you can have a look at gsap, animate.js. You'll have to manually animate the element as in: const bind = useDrag(({ target, offset: [x] }) => {
gsap.set(currentTarget, { x })
})
return <div {...bind()} /> gsap has a useReact hook to make sure effects are cleaned up properly so you should probably use it when performing animations. |
Beta Was this translation helpful? Give feedback.
Hi! Sure. react-spring is merely used to animate values outside of react render cycle. Any other animation lib would work, but you could also do something like:
Note that I would not recommend to do this as it basically re-rerenders the component on every event frame: it's not a major issue with a single div but you'll quickly get into perf issues with a more elaborated situation.
For animation libs, you can have a look at gsap, animate.js. You'll have to manually animate the element as in: