feat: added inertia example

Author: dbismut

components/examples-hooks.js

@@ -74,6 +74,11 @@ return <animated.div style={{ transform }} children="Slide">`,
     link: 'https://codesandbox.io/embed/r5qmj8m6lq',
     tags: ['useSprings'],
   },
+  {
+    name: 'hooks/inertia',
+    title: 'Inertia',
+    tags: ['useSprings'],
+  },
   {
     name: 'hooks/clamp-bounce',
     title: 'Clamp bounce',

demos/hooks/inertia/index.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import { useSpring, animated } from 'react-spring'
+import { useDrag } from 'react-use-gesture'
+import './styles.css'
+
+const [min, max] = [-250, 250]
+
+export default function Inertia() {
+  const [{ y }, set] = useSpring(() => ({ y: 0 }))
+
+  const bind = useDrag(
+    ({ down, movement: [, dy], vxvy: [, vy], memo = y.getValue() }) => {
+      if (down) set({ y: dy + memo, onFrame: () => {}, immediate: true })
+      else inertia(dy + memo + 1, vy)
+      return memo
+    }
+  )
+
+  const springBounce = React.useCallback(
+    velocity => {
+      set({
+        y: velocity > 0 ? max : min,
+        onFrame: () => {}, // <-- this is annoying :)
+        config: { velocity: velocity * 3 },
+      })
+    },
+    [set]
+  )
+
+  const inertia = React.useCallback(
+    (position, velocity) => {
+      set({
+        to: async (next, stop) => {
+          await next({
+            y: position,
+            onFrame: async v => {
+              const vel = y.lastVelocity
+
+              if ((v.y > max && vel > 0) || (v.y < min && vel < 0)) {
+                stop()
+                springBounce(vel)
+              }
+            },
+            config: { decay: true, velocity },
+          })
+        },
+      })
+    },
+    [y, set, springBounce]
+  )
+  // Now we're just mapping the animated values to our view, that's it. Btw, this component only renders once. :-)
+  return (
+    <div className="inertia">
+      <animated.div {...bind()} style={{ y }} />
+    </div>
+  )
+}

demos/hooks/inertia/styles.css

@@ -0,0 +1,14 @@
+.inertia {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ecede7;
+  height: 100%;
+}
+
+.inertia > div {
+  width: 80px;
+  height: 80px;
+  background: hotpink;
+  border-radius: 16px;
+}