feat: add linear-gradient demo

Author: aleclarson

components/examples-tests.js

@@ -10,6 +10,11 @@ export default [
     link: 'https://codesandbox.io/embed/j0y0vpz59',
     tags: ['useChain', 'useTransition'],
   },
+  {
+    name: 'tests/issue-827',
+    title: 'Issue #827 - Linear gradient',
+    tags: ['useTransition'],
+  },
   {
     name: 'tests/issue-461',
     title: 'Issue #461 - Remove multiple items',

demos/tests/issue-827/index.js

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react'
+import ReactDOM from 'react-dom'
+import { useSpring, animated } from 'react-spring'
+
+function linearGradient(deg, startColor, startPosition, endColor, endPosition) {
+  return `linear-gradient(${deg}deg, ${startColor} ${startPosition}, ${endColor} ${endPosition})`
+}
+
+function useLinearGradient(from, to) {
+  return useSpring(() => ({
+    from,
+    to: async next => {
+      let i = 500
+      let reverse = false
+      while (--i > 0) {
+        reverse = !reverse
+        await next({
+          to,
+          from,
+          reverse,
+          onAnimate: console.log,
+          onChange: console.log,
+        })
+        console.log('done')
+      }
+    },
+  }))
+}
+
+export default function App() {
+  // The background gradient
+  const [gradient] = useLinearGradient(
+    {
+      background: linearGradient(
+        135,
+        'rgb(185, 198, 109)',
+        '0%',
+        'rgb(34, 48, 17)',
+        '100%'
+      ),
+    },
+    {
+      background: linearGradient(
+        135,
+        'rgb(85, 69, 47)',
+        '0%',
+        'rgb(218, 102, 92)',
+        '100%'
+      ),
+    }
+  )
+
+  return <animated.div style={{ ...gradient, height: 100, width: 100 }} />
+}