Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series







yours forever

Become a Pro and unlock everything




per month

Animated Draggable Components

In this video, you’ll learn how to make your animation more interactive with draggable components. We’ll look into different ways to create a drag and drop animation and how to combine them with React Spring while making sure it’s highly performant.


Become a pro to download code and videos



8 months ago

It looks like react-with-gesture is now deprecated in favor of react-use-gesture.


over 2 years ago [edited]

Working code for 5:45 mark:

            {({ xy: [x, y], delta: [dx, dy], initial: [ix, iy] }) => (
                <h1>Drag xy:({x},{y}), delta:({dx},{dy}), initial:({ix},{iy})</h1>
User avatar


about 3 years ago

Here is the xDelta equivalent at 9:45, Just in case anyone got stuck like myself

    { ( {  down,  delta:  [ x ]  } )  =>  (
        style={ {
          transform: ` translateX( ${x}px ) `,
        } }

Michael Martinez

about 3 years ago [edited]

The gesture event object for v4.

  event,                        // source event
  target,                       // dom node
  time,                         // time tag
  initial,                      // click coordinates (vec2)
  xy,                           // page coordinates (vec2)
  previous,                     // previous page coordinates (vec2)
  delta,                        // delta offset (xy - initial) (vec2)
  direction,                    // direction normal (vec2)
  local,                        // delta with book-keeping (vec2)
  velocity,                     // drag momentuum / speed
  distance,                     // delta distance
  down,                         // mouse / touch down
  first,                        // marks first event (mouse / touch down)
  args,                         // arguments optionally passed to bind(a,b,c,d,..)
  temp,                         // arguments optionally returned by onActions eventHandler
  shiftKey,                     // shift pressed (true/false)


about 3 years ago

This does not seem to be working anymore? Maybe an API change of react-with-gesture?

Want to join the conversation?

Become a Pro member today!