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

$

39

.99

$

24

.99

yours forever

Become a Pro and unlock everything

$

24

.99

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.

Downloads

Become a pro to download code and videos

Comments

Steinar

8 months ago

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

Christoffer

over 2 years ago [edited]

Working code for 5:45 mark:

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

Jared

about 3 years ago

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

    { ( {  down,  delta:  [ x ]  } )  =>  (
      <Card
        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)
}

R

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!