Updated examples for v9.0.0

components/examples-tests.js

@@ -1,20 +1,48 @@
 export default [
-  {
-    name: 'tests/spring-start-stop',
-    title: 'spring start stop',
-    link: '#',
-    tags: ['controller'],
-  },
   {
     name: 'tests/freshtilledsoil',
     title: 'Freshtilledsoil stresstest',
     link: 'https://codesandbox.io/embed/j0y0vpz59',
-    tags: ['useChain'],
+    tags: ['useChain', 'useTransition'],
   },
   {
     name: 'tests/remove_multiple_items',
     title: 'Remove multiple items',
-    link: '#',
     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-650',
+    title: '',
+    tags: ['useTransition'],
+  },
+  {
+    name: 'tests/issue-657',
+    title: '',
+    tags: ['useSprings'],
+  },
 ]

demos/hooks/blackflag/index.js

@@ -10,7 +10,9 @@ const interp = i => r =>
 export default function App() {
   const props = useSpring({
     to: async next => {
-      while (1) await next({ radians: 2 * Math.PI })
+      while (1) {
+        await next({ radians: 2 * Math.PI, reset: true })
+      }
     },
     from: { radians: 0 },
     reset: true,

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

@@ -14,7 +14,7 @@ export default function App() {
 
   // 1. create spring-refs, which will refer to the springs Controller
   const springRef = useRef()
-  const { size, opacity, ...rest } = useSpring({
+  const { size, background } = useSpring({
     from: { size: '20%', background: 'hotpink' },
     size: open ? '80%' : '20%',
     background: open ? 'white' : 'hotpink',
@@ -29,21 +29,19 @@ export default function App() {
     enter: { opacity: 1, transform: 'scale(1)' },
     leave: { opacity: 0, transform: 'scale(0)' },
     trail: 400 / data.length,
-    config: { ...config.stiff, precision: 0.01, cancelDelay: true },
+    config: { ...config.stiff, precision: 0.01 },
     unique: true,
     //reset: true,
     ref: transRef,
   })
 
-  //console.log(open ? "container > I T E M S" : "I T E M S > container")
-
   const chain = [springRef, transRef]
   useChain(open ? chain : chain.reverse(), [0, open ? 0.1 : 0.5])
 
   return (
     <Main>
       <Sidebar
-        style={{ ...rest, width: size, height: size }}
+        style={{ width: size, height: size, background }}
         onClick={() => set(open => !open)}>
         {transitions.map(({ item, key, props }) => (
           <Item key={key} style={{ ...props, background: item.css }} />
@@ -78,18 +76,6 @@ const Sidebar = styled(animated.div)`
   box-sizing: border-box;
 `
 
-const Content = styled(animated.div)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
 const Item = styled(animated.div)`
   width: 100%;
   height: 100%;

demos/hooks/flip-card/index.js

@@ -14,15 +14,18 @@ export default function Card() {
     opacity: flipped ? 1 : 0,
     transform: `perspective(1400px) rotateX(${flipped ? 180 : 0}deg)`,
     from: {
-      opacity: flipped ? 1 : 0,
+      opacity: 0,
       transform: `perspective(1400px) rotateX(0deg)`,
     },
   })
+
   return (
     <div className="flip-main" onClick={() => set(state => !state)}>
       <a.div
         className="flip-c flip-back"
-        style={{ opacity: opacity.interpolate(o => 1 - o), transform }}
+        style={{
+          transform,
+        }}
       />
       <a.div
         className="flip-c flip-front"

demos/hooks/masonry-grid/index.js

@@ -1,45 +1,67 @@
 import React, { useState, useEffect } from 'react'
-import { useTransition, animated as a, config } from 'react-spring'
+import { useTransition, animated as a, config, interpolate } from 'react-spring'
 import shuffle from 'lodash/shuffle'
 import { useMeasure, useMedia } from './helpers'
 import data from './data'
 import './styles.css'
 
+const FAST_MODE = false
+
 export default function App() {
   const columns = 6
   const [bind, { width }] = useMeasure()
   const [items, set] = useState(data)
 
-  let heights = new Array(columns).fill(0)
-  let gridItems = items.map((child, i) => {
-    const column = heights.indexOf(Math.min(...heights))
-    const xy = [
-      (width / columns) * column,
-      (heights[column] += child.height / 2) - child.height / 2,
-    ]
-    return { ...child, xy, width: width / columns, height: child.height / 2 }
-  })
+  const heights = new Array(columns).fill(0)
+  const gridItems = width
+    ? items.map((child, i) => {
+        const column = heights.indexOf(Math.min(...heights))
+        const height = child.height / 2
+        return {
+          ...child,
+          xy: [
+            (width / columns) * column,
+            (heights[column] += height) - height,
+          ],
+          width: width / columns,
+          height,
+        }
+      })
+    : []
 
+  const trail = FAST_MODE ? 25 : 80
   const transitions = useTransition(gridItems, item => item.css, {
-    from: ({ xy, width, height }) => ({ xy, width, height, opacity: 0 }),
-    enter: ({ xy, width, height }) => ({ xy, width, height, opacity: 1 }),
-    update: ({ xy, width, height }) => ({ xy, width, height }),
-    leave: { height: 0, opacity: 0 },
+    from: ({ xy, width, height }) => ({
+      xy,
+      width,
+      height,
+      opacity: 0,
+      scale: 0.8,
+    }),
+    enter: (_, i) => ({ scale: 1, opacity: 1, delay: i * trail }),
+    update: ({ xy }) => ({ xy }),
+    leave: { scale: 0.8, opacity: 0 },
     config: config.stiff,
-    trail: 25,
   })
 
-  useEffect(() => void setInterval(() => set(shuffle), 2000), [])
+  useEffect(() => every(FAST_MODE ? 1000 : 2500, () => set(shuffle)), [
+    gridItems.length,
+  ])
 
   return (
-    <div className="mgrid">
+    <div
+      className="mgrid"
+      onClick={() => {
+        set(items.length ? [] : data)
+      }}>
       <div {...bind} className="mgrid-list">
-        {transitions.map(({ item, props: { xy, ...rest }, key }) => (
+        {transitions.map(({ item, props: { xy, scale, ...rest }, key }) => (
           <a.div
             key={key}
             style={{
-              transform: xy.interpolate(
-                (x, y) => `translate3d(${x}px,${y}px,0)`
+              transform: interpolate(
+                [xy, scale],
+                ([x, y], s) => `translate3d(${x}px,${y}px,0) scale(${s})`
               ),
               ...rest,
             }}>
@@ -50,3 +72,8 @@ export default function App() {
     </div>
   )
 }
+
+function every(ms, cb) {
+  const id = setInterval(cb, ms)
+  return () => clearInterval(id)
+}

demos/hooks/notification-hub/index.js

@@ -4,6 +4,8 @@ import { X } from 'react-feather'
 import { useTransition } from 'react-spring'
 import { Main, Container, Message, Button, Content, Life } from './styles.js'
 
+const DEBUG = false
+
 let id = 0
 
 function MessageHub({
@@ -17,24 +19,26 @@ function MessageHub({
 
   const transitions = useTransition(items, item => item.key, {
     from: { opacity: 0, height: 0, life: '100%' },
-    enter: item => async next =>
-      await next({ opacity: 1, height: refMap.get(item).offsetHeight }),
-    leave: item => async (next, cancel) => {
-      console.log('  one')
-      cancelMap.set(item, cancel)
-      await next({ life: '0%' })
-      console.log('  two')
-      await next({ opacity: 0 })
-      console.log('  three')
-      await next({ height: 0 })
-      console.log('  done!')
+    enter: item => async (next, stop) => {
+      if (DEBUG) console.log(`  Entering:`, item.key)
+      cancelMap.set(item, () => {
+        if (DEBUG) console.log(`  Cancelled:`, item.key)
+        stop()
+        setItems(state => state.filter(i => i.key !== item.key))
+      })
+      await next({
+        opacity: 1,
+        height: refMap.get(item).offsetHeight,
+        config,
+      })
+      await next({ life: '0%', config: { duration: timeout } })
+      cancelMap.get(item)()
     },
-    onRest: item => {
-      console.log('onRest', item)
-      setItems(state => state.filter(i => i.key !== item.key))
+    leave: item => async next => {
+      if (DEBUG) console.log(`  Leaving:`, item.key)
+      await next({ opacity: 0, config })
+      await next({ height: 0, config })
     },
-    config: (item, state) =>
-      state === 'leave' ? [{ duration: timeout }, config, config] : config,
   })
 
   useEffect(
@@ -53,7 +57,10 @@ function MessageHub({
             <Button
               onClick={e => {
                 e.stopPropagation()
-                cancelMap.has(item) && cancelMap.get(item)()
+                if (cancelMap.has(item)) {
+                  if (DEBUG) console.log(`  Cancelled item:`, item)
+                  cancelMap.get(item)()
+                }
               }}>
               <X size={18} />
             </Button>