chore: update demos for #809

pmndrs/react-spring#809

Author: aleclarson

components/examples-tests.js

@@ -6,43 +6,43 @@ export default [
     tags: ['useChain', 'useTransition'],
   },
   {
-    name: 'tests/remove_multiple_items',
-    title: 'Remove multiple items',
+    name: 'tests/issue-461',
+    title: 'Issue #461 - Remove multiple items',
     tags: ['useTransition'],
   },
   {
-    name: 'tests/issue-436',
-    title: 'useTransition with "reset" prop',
-    tags: ['useTransition'],
-  },
-  {
-    name: 'tests/issue-631',
-    title: '',
-    tags: ['useChain'],
-  },
-  {
-    name: 'tests/issue-634',
-    title: '',
-    tags: ['useChain'],
-  },
-  {
-    name: 'tests/issue-639',
-    title: '',
-    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/clamp-bounce/index.js

@@ -7,6 +7,7 @@ export default function ClampBounce() {
   const { y } = useSpring({
     y: toggle ? 250 : -250,
     config: { tension: 120, friction: 12, clamp: 2 },
+    onAnimate: console.log,
   })
 
   return (

demos/hooks/goo/index.js

@@ -8,9 +8,13 @@ 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,
+    onStart: () => console.log('onStart:', i),
+    onRest: () => console.log('onRest:', i),
   }))
 
   return (

demos/hooks/image-fade/index.js

@@ -30,8 +30,15 @@ export default function App() {
 
   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,10 +47,10 @@ export default function App() {
     return () => clearInterval(id)
   }, [])
 
-  return transition((props, item) => (
+  return transition((props, { url }) => (
     <animated.div
       className="fade-bg"
-      style={{ ...props, backgroundImage: `url(${item.url})` }}
+      style={{ ...props, backgroundImage: `url(${url})` }}
     />
   ))
 }

demos/hooks/inertia/index.js

@@ -3,51 +3,59 @@ import { useSpring, animated } from 'react-spring'
 import { useDrag } from 'react-use-gesture'
 import './styles.css'
 
+const modes = {
+  pong: 0, // The min/max values deflect the decay animation
+  bounce: 0, // The animation bounces instead of overshooting. Try both directions
+  skipFinish: 0, // This demonstrates "from !== to" when truthy, else "from === to" (it should work either way)
+}
+
 const [min, max] = [-250, 250]
+const clamp = value => Math.max(min, Math.min(max, value))
 
 export default function Inertia() {
-  const [{ y }, set] = useSpring(() => ({ y: 0 }))
+  const { y } = useSpring({ y: 0 })
 
   const bind = useDrag(
-    ({ down, movement: [, dy], vxvy: [, vy], memo = y.getValue() }) => {
-      if (down) set({ y: dy + memo, onFrame: () => {}, immediate: true })
+    ({ down, movement: [, dy], vxvy: [, vy], memo = y.get() }) => {
+      if (down) y.set(clamp(dy + memo))
       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 springBounce = velocity =>
+    y.animate({
+      to: velocity > 0 ? max : min,
+      config: {
+        velocity: velocity,
+        tension: 30,
+        friction: 2,
+        clamp: modes.bounce ? 0.7 : false,
+        precision: 0.005,
+      },
+      onRest: () => console.log('BOUNCE END'),
+    })
 
-  const inertia = React.useCallback(
-    (position, velocity) => {
-      set({
-        to: async (next, stop) => {
-          await next({
-            y: position,
-            onFrame: async v => {
-              const vel = y.lastVelocity
+  const inertia = (position, velocity) =>
+    y.animate({
+      y: position,
+      onChange: async val => {
+        const vel = y.node.lastVelocity
+        if ((val > max && vel > 0) || (val < min && vel < 0)) {
+          if (modes.pong) {
+            inertia(y.get(), -vel)
+          } else {
+            if (!modes.skipFinish) {
+              y.finish(vel > 0 ? max : min)
+            }
+            springBounce(vel)
+          }
+        }
+      },
+      config: { decay: true, velocity },
+      onRest: () => console.log('INERTIA END'),
+    })
 
-              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">

demos/hooks/multistage-transitions/index.js

@@ -15,7 +15,7 @@ export default function MultiStageTransition() {
       color: '#8fa5b6',
     },
     enter: [
-      { opacity: 1, height: 50, innerHeight: 50 },
+      { opacity: 1, height: 50, innerHeight: 50, reset: true },
       { rotateX: 180, color: '#28d79f' },
       { rotateX: 0 },
     ],

demos/tests/freshtilledsoil/index.js

@@ -56,8 +56,8 @@ export default function Container() {
 
 const TransitionGrid = ({ visible, items, removeItem }) => {
   const containerRef = useRef()
-  const containerTransition = useTransition(visible, null, {
-    config: { ...config.stiff, precision: 0.01 },
+  const containerTransition = useTransition(visible, {
+    config: config.stiff,
     from: { opacity: 0, x: -500 },
     enter: { opacity: 1, x: 0 },
     leave: { opacity: 0, x: 500 },
@@ -67,7 +67,7 @@ const TransitionGrid = ({ visible, items, removeItem }) => {
   })
 
   const itemsRef = useRef()
-  const itemsTransition = useTransition(visible ? items : [], null, {
+  const itemsTransition = useTransition(visible ? items : [], {
     config: { ...config.stiff, precision: 0.01 },
     from: { opacity: 0, scale: 0 },
     enter: { opacity: 1, scale: 1 },
@@ -88,11 +88,10 @@ const TransitionGrid = ({ visible, items, removeItem }) => {
 
   return (
     <div>
-      {containerTransition.map(
-        ({ item, key, props: { x, opacity } }) =>
+      {containerTransition(
+        ({ x, opacity }, item) =>
           item && (
             <animated.div
-              key={key}
               style={{
                 position: 'absolute',
                 height: 200,
@@ -101,21 +100,18 @@ const TransitionGrid = ({ visible, items, removeItem }) => {
                 transform: x.interpolate(x => `translateX(${x}px)`),
               }}
               className="fts-grid fts-animated-grid">
-              {itemsTransition.map(
-                ({ item, key, props: { scale, opacity } }) => (
-                  <animated.div
-                    className="fts-card"
-                    key={key}
-                    style={{
-                      opacity,
-                      transform: scale.interpolate(s => `scale(${s})`),
-                    }}
-                    onClick={() => removeItem(item)}>
-                    <div className="fts-close-card">&#x2715;</div>
-                    <div>{item}</div>
-                  </animated.div>
-                )
-              )}
+              {itemsTransition(({ scale, opacity }, item) => (
+                <animated.div
+                  className="fts-card"
+                  style={{
+                    opacity,
+                    transform: scale.interpolate(s => `scale(${s})`),
+                  }}
+                  onClick={() => removeItem(item)}>
+                  <div className="fts-close-card">&#x2715;</div>
+                  <div>{item}</div>
+                </animated.div>
+              ))}
             </animated.div>
           )
       )}

demos/tests/issue-436/index.js

@@ -12,24 +12,22 @@ import { useTransition, animated as a } from 'react-spring'
 export default function App() {
   const [reset, setReset] = useState(false)
   const [item, setItem] = useState(0)
-  const t = useTransition(item, null, {
-    keys: i => i,
+  const t = useTransition(item, {
     initial: null,
     reset,
     from: { transform: 'translate(-100%)' },
     enter: { transform: 'translate(0%)' },
     leave: { transform: 'translate(100%)' },
   })
-  const items = t.map(({ item, key, props }) => (
+  const items = t((style, item) => (
     <a.div
-      key={key}
       style={{
         display: 'flex',
         position: 'absolute',
         width: '100%',
         top: 50,
         justifyContent: 'center',
-        ...props,
+        ...style,
       }}
       onClick={() => {
         setItem(i => i + 1)

demos/tests/remove_multiple_items/index.js renamed to demos/tests/issue-461/index.js

@@ -9,7 +9,7 @@ export default function Container() {
 
   const addItems = useCallback(() => setItems(range(10)))
 
-  const transitions = useTransition(items, null, {
+  const transition = useTransition(items, {
     from: { transform: 'translate3d(0,40px,0)', opacity: 0 },
     enter: { transform: 'translate3d(0,0px,0)', opacity: 1 },
     leave: { transform: 'translate3d(0,40px,0)', opacity: 0 },
@@ -24,10 +24,8 @@ export default function Container() {
         Add
       </button>
       <div style={{ display: 'flex' }}>
-        {transitions.map(({ item, key, props }) => (
-          <animated.div key={key} style={props}>
-            {item}
-          </animated.div>
+        {transition((style, item) => (
+          <animated.div style={style}>{item}</animated.div>
         ))}
       </div>
     </div>

demos/tests/issue-639/index.js

@@ -6,7 +6,12 @@ import './styles.css'
 
 export default function App() {
   const [index, set] = useState(0)
-  const conf =
+  useEffect(() => {
+    setInterval(() => set(state => (state + 1) % 4), 2000)
+  }, [])
+
+  const transition = useTransition(
+    slides[index],
     index % 2
       ? {
           leave: { transform: `translateX(100%)` },
@@ -19,20 +24,14 @@ export default function App() {
           from: { transform: `rotateX(40deg) translateY(-20%)` },
           config: config.molasses,
         }
-  const transitions = useTransition(slides[index], item => item.id, conf)
-  useEffect(
-    () => void setInterval(() => set(state => (state + 1) % 4), 2000),
-    []
   )
-  return transitions.map(({ item, props, key }) => (
+
+  return transition((style, item) => (
     <animated.div
-      key={key}
       className="bg"
       style={{
-        ...props,
-        backgroundImage: `url(https://images.unsplash.com/${
-          item.url
-        }&auto=format&fit=crop)`,
+        ...style,
+        backgroundImage: `url(https://images.unsplash.com/${item.url}&auto=format&fit=crop)`,
       }}
     />
   ))