useTransition rework

components/examples-hooks.js

@@ -74,6 +74,16 @@ 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',
+    tags: ['useSprings'],
+  },
   {
     name: 'hooks/mouse-parallax',
     title: 'Mouse parallax',
@@ -246,4 +256,10 @@ return items.map(i =>
     link: 'https://codesandbox.io/embed/rloj7nw3pn',
     tags: ['useSpring'],
   },
+  {
+    name: 'hooks/sorted-clicks',
+    title: 'Sort items by number of clicks',
+    link: 'https://codesandbox.io/embed/rloj7nw3pn',
+    tags: ['useSprings'],
+  },
 ]

components/examples-tests.js

@@ -1,48 +1,63 @@
 export default [
+  {
+    name: 'tests/parallax',
+    title: 'Parallax',
+    tags: ['Parallax'],
+  },
   {
     name: 'tests/freshtilledsoil',
     title: 'Freshtilledsoil stresstest',
     link: 'https://codesandbox.io/embed/j0y0vpz59',
     tags: ['useChain', 'useTransition'],
   },
   {
-    name: 'tests/remove_multiple_items',
-    title: 'Remove multiple items',
-    tags: ['useTransition'],
+    name: 'tests/issue-707',
+    title: 'Issue #707 - Parallax',
+    tags: ['Parallax'],
   },
   {
-    name: 'tests/issue-436',
-    title: 'useTransition with "reset" prop',
+    name: 'tests/issue-827',
+    title: 'Issue #827 - Linear gradient',
     tags: ['useTransition'],
   },
   {
-    name: 'tests/issue-631',
-    title: '',
-    tags: ['useChain'],
-  },
-  {
-    name: 'tests/issue-634',
-    title: '',
-    tags: ['useChain'],
-  },
-  {
-    name: 'tests/issue-639',
-    title: '',
+    name: 'tests/issue-461',
+    title: 'Issue #461 - Remove multiple items',
     tags: ['useTransition'],
   },
   {
-    name: 'tests/issue-645',
-    title: '',
-    tags: ['useSprings', 'useGesture'],
+    name: 'tests/issue-657',
+    title: 'Issue #657',
+    tags: ['useSprings'],
   },
   {
-    name: 'tests/issue-650',
-    title: '',
+    name: 'tests/issue-436',
+    title: 'Issue #436 - useTransition with "reset" prop',
     tags: ['useTransition'],
   },
-  {
-    name: 'tests/issue-657',
-    title: '',
-    tags: ['useSprings'],
-  },
+  // {
+  //   name: 'tests/issue-631',
+  //   title: 'Issue #631',
+  //   tags: ['useChain'],
+  // },
+  // {
+  //   name: 'tests/issue-634',
+  //   title: 'Issue #634',
+  //   tags: ['useChain'],
+  // },
+  // {
+  //   name: 'tests/issue-639',
+  //   title: 'Issue #639',
+  //   tags: ['useTransition'],
+  // },
+  // {
+  //   name: 'tests/issue-645',
+  //   title: 'Issue #645',
+  //   tags: ['useSprings', 'useGesture'],
+  // },
+  // {
+  //   name: 'tests/issue-650',
+  //   title: 'Issue #650',
+  //   tags: ['useTransition'],
+  // },
 ]

demos/hooks/blackflag/index.js

@@ -15,7 +15,6 @@ export default function App() {
       }
     },
     from: { radians: 0 },
-    reset: true,
     config: { duration: 3500 },
   })
   return (

demos/hooks/card-flick/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useSprings, animated, to } from 'react-spring'
-import { useGesture } from 'react-with-gesture'
+import { useDrag } from 'react-use-gesture'
 import './styles.css'
 
 const cards = [
@@ -36,12 +36,11 @@ export default function Deck() {
   }))
 
   // Create a gesture, we're interested in down-state, delta (current-pos - click-pos), direction and velocity
-  const bind = useGesture(
+  const bind = useDrag(
     ({
       args: [index],
       down,
-      delta: [xDelta],
-      distance,
+      movement: [xMove],
       direction: [xDir],
       velocity,
     }) => {
@@ -57,9 +56,9 @@ export default function Deck() {
         if (index !== i) return
         const isGone = gone.has(index)
         // When a card is gone it flys out left or right, otherwise it's either dragged to delta, or goes back to zero
-        const x = isGone ? (200 + window.innerWidth) * dir : down ? xDelta : 0
+        const x = isGone ? (200 + window.innerWidth) * dir : down ? xMove : 0
         // How much the card tilts, flicking it harder makes it rotate faster
-        const rot = xDelta / 100 + (isGone ? dir * 10 * velocity : 0)
+        const rot = xMove / 100 + (isGone ? dir * 10 * velocity : 0)
         // Active cards lift up a bit
         const scale = down ? 1.1 : 1
         return {

demos/hooks/chain-animation/index.tsx → demos/hooks/chain-animation/index.js

@@ -24,14 +24,12 @@ export default function App() {
 
   // 2. create transition-refs
   const transRef = useRef()
-  const transitions = useTransition(open ? data : [], item => item.name, {
+  const transition = useTransition(open ? data : [], {
     from: { opacity: 0, transform: 'scale(0)' },
     enter: { opacity: 1, transform: 'scale(1)' },
     leave: { opacity: 0, transform: 'scale(0)' },
     trail: 400 / data.length,
     config: { ...config.stiff, precision: 0.01 },
-    unique: true,
-    //reset: true,
     ref: transRef,
   })
 
@@ -43,8 +41,8 @@ export default function App() {
       <Sidebar
         style={{ width: size, height: size, background }}
         onClick={() => set(open => !open)}>
-        {transitions.map(({ item, key, props }) => (
-          <Item key={key} style={{ ...props, background: item.css }} />
+        {transition((values, item) => (
+          <Item style={{ ...values, background: item.css }} />
         ))}
       </Sidebar>
     </Main>

demos/hooks/clamp-bounce/index.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { useSpring, animated } from 'react-spring'
+import './styles.css'
+
+export default function ClampBounce() {
+  const [toggle, setToggle] = React.useState(false)
+  const { y } = useSpring({
+    y: toggle ? 250 : -250,
+    config: { tension: 120, friction: 12, clamp: 2 },
+    onAnimate: console.log,
+  })
+
+  return (
+    <div className="clamp-bounce">
+      <animated.div onClick={() => setToggle(t => !t)} style={{ y }} />
+    </div>
+  )
+}

demos/hooks/clamp-bounce/styles.css

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

demos/hooks/draggable-list/index.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react'
 import clamp from 'lodash/clamp'
-import { useGesture } from 'react-with-gesture'
+import { useDrag } from 'react-use-gesture'
 import { useSprings, animated, to } from 'react-spring'
 import './styles.css'
 
@@ -35,7 +35,7 @@ export default function DraggableList({
   const [springs, setSprings] = useSprings(items.length, fn(order.current))
 
   // Preps a gesture handler which returns drag-deltas, touched/clicked state, etc.
-  const bind = useGesture(({ args: [originalIndex], down, delta: [, y] }) => {
+  const bind = useDrag(({ args: [originalIndex], down, movement: [, y] }) => {
     // Bunch of math to calculate current row and new order, it's unavoidable ¯\_(ツ)_/¯
     const curIndex = order.current.indexOf(originalIndex)
     const curRow = clamp(
@@ -60,10 +60,8 @@ export default function DraggableList({
               boxShadow: shadow.to(
                 s => `rgba(0, 0, 0, 0.2) 0px ${s}px ${2 * s}px 0px`
               ),
-              transform: to(
-                [y, scale],
-                (y, s) => `translate3d(0,${y}px,0) scale(${s})`
-              ),
+              y,
+              scale,
             }}
             children={items[i]}
             {...bind(i)}

demos/hooks/gestures-pager/index.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react'
 import clamp from 'lodash-es/clamp'
 import { useSprings, animated } from 'react-spring'
-import { useGesture } from 'react-with-gesture'
+import { useDrag } from 'react-use-gesture'
 import './styles.css'
 
 const pages = [
@@ -25,8 +25,8 @@ export default function Viewpager() {
     set(i => ({ x: i * width.current, sc: 1, display: 'block' }))
   }, [])
 
-  const bind = useGesture(
-    ({ down, delta: [xDelta], direction: [xDir], distance, cancel }) => {
+  const bind = useDrag(
+    ({ down, movement: [xMovement], direction: [xDir], distance, cancel }) => {
       if (down && distance > width.current / 2)
         cancel(
           (index.current = clamp(
@@ -38,7 +38,7 @@ export default function Viewpager() {
       set(i => {
         if (i < index.current - 1 && i > index.current + 1)
           return { display: 'none' }
-        const x = (i - index.current) * width.current + (down ? xDelta : 0)
+        const x = (i - index.current) * width.current + (down ? xMovement : 0)
         const sc = down ? 1 - distance / width.current / 2 : 1
         return { x, sc, display: 'block' }
       })
@@ -49,13 +49,7 @@ export default function Viewpager() {
       ref={r => r && (width.current = r.getBoundingClientRect().width)}
       className="viewpager-main">
       {props.map(({ x, display, sc }, i) => (
-        <animated.div
-          {...bind()}
-          key={i}
-          style={{
-            display,
-            transform: x.to(x => `translate3d(${x}px,0,0)`),
-          }}>
+        <animated.div {...bind()} key={i} style={{ display, x }}>
           <animated.div
             style={{
               transform: sc.to(s => `scale(${s})`),

demos/hooks/gestures-pull/index.js

@@ -1,28 +1,21 @@
 import React, { useState, useRef, useEffect } from 'react'
 import clamp from 'lodash-es/clamp'
-import { useGesture } from 'react-with-gesture'
+import { useDrag } from 'react-use-gesture'
 import { useSpring, animated } from 'react-spring'
 import { add, scale } from 'vec-la'
 import './styles.css'
 
 function Pull() {
-  const [{ xy }, set] = useSpring(() => ({ xy: [0, 0] }))
-  const bind = useGesture(({ down, delta, velocity }) => {
+  const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
+  const bind = useDrag(({ down, movement: [mx, my], velocity }) => {
     velocity = Math.max(1, velocity)
-    console.log(delta, velocity)
     set({
-      xy: down ? delta : [0, 0],
+      x: down ? mx : 0,
+      y: down ? my : 0,
       config: { mass: velocity, tension: 500 * velocity, friction: 50 },
     })
   })
-  return (
-    <animated.div
-      {...bind()}
-      style={{
-        transform: xy.to((x, y) => `translate3d(${x}px,${y}px,0)`),
-      }}
-    />
-  )
+  return <animated.div {...bind()} style={{ x, y }} />
 }
 
 export default function App() {

demos/hooks/goo/index.js

@@ -8,9 +8,11 @@ const trans = (x, y) => `translate3d(${x}px,${y}px,0) translate3d(-50%,-50%,0)`
 
 export default function Goo() {
   const ref = useRef(null)
-  const [trail, set] = useTrail(3, () => ({
+  const [trail, set] = useTrail(3, i => ({
     xy: [0, 0],
-    config: i => (i === 0 ? fast : slow),
+    // Make "x" fast and "y" slow
+    config: i => (i == 0 ? fast : slow),
+    immediate: i == 0,
   }))
 
   return (

demos/hooks/image-fade/index.js

@@ -28,10 +28,17 @@ const slides = [
 export default function App() {
   const [index, set] = useState(0)
 
-  const transitions = useTransition(slides[index], item => item.id, {
+  const transition = useTransition(slides[index], {
     from: { opacity: 0 },
-    enter: { opacity: 1 },
-    leave: { opacity: 0 },
+    enter: [
+      { zIndex: 1, immediate: true, onChange: console.log },
+      { opacity: 1, onStart: () => console.log('onEnter(%O)', index) },
+    ],
+    leave: [
+      { zIndex: 0, immediate: true, onChange: console.log },
+      { opacity: 0, onStart: () => console.log('onLeave(%O)', index) },
+    ],
+    expires: Infinity,
     config: config.molasses,
   })
 
@@ -40,11 +47,10 @@ export default function App() {
     return () => clearInterval(id)
   }, [])
 
-  return transitions.map(({ item, props, key }) => (
+  return transition((props, { url }) => (
     <animated.div
-      key={key}
       className="fade-bg"
-      style={{ ...props, backgroundImage: `url(${item.url})` }}
+      style={{ ...props, backgroundImage: `url(${url})` }}
     />
   ))
 }