fix/remove keyframes

Author: drcmda

examples/components/examples-hooks.js

@@ -171,15 +171,15 @@ return transitions.map(({ item, props, key }) => (
   },
   {
     name: 'keyframes-script',
-    title: 'Keyframes scripting',
+    title: 'Spring scripting',
     link: 'https://codesandbox.io/embed/141nrz6v73',
-    tags: ['useKeyframes'],
+    tags: ['useSpring'],
   },
   {
     name: 'keyframes-blackflag',
-    title: 'Keyframes reset script',
+    title: 'Spring reset script',
     link: 'https://codesandbox.io/embed/8ypj5vq6m9',
-    tags: ['useKeyframes'],
+    tags: ['useSpring'],
     code: {
       useKeyframes: `const interp = i => r =>
   \`translate3d(0, \${15 * Math.sin(r + (i * 2 * Math.PI) / 1.6)}px, 0)\`

examples/demos/keyframes-blackflag/index.js

@@ -1,26 +1,21 @@
 import React from 'react'
-import { useKeyframes, animated } from 'react-spring/hooks'
+import { useSpring, animated } from 'react-spring/hooks'
 import range from 'lodash-es/range'
 import './styles.css'
 
 const items = range(4)
 const interp = i => r =>
   `translate3d(0, ${15 * Math.sin(r + (i * 2 * Math.PI) / 1.6)}px, 0)`
-const useScript = useKeyframes.spring(
-  async next => {
-    while (1)
-      await next({
-        radians: 2 * Math.PI,
-        from: { radians: 0 },
-        reset: true, // <----------- this doesn't work
-        config: { duration: 3500 },
-      })
-  },
-  { radians: 0 }
-)
 
 export default function App() {
-  const props = useScript()
+  const props = useSpring({
+    to: async next => {
+      while (1) await next({ radians: 2 * Math.PI })
+    },
+    from: { radians: 0 },
+    reset: true,
+    config: { duration: 3500 },
+  })
   return (
     <div className="script-bf-main">
       {items.map(i => (

examples/demos/keyframes-script/index.js

@@ -1,29 +1,29 @@
 import React, { useEffect } from 'react'
-import { useKeyframes, animated } from 'react-spring/hooks'
+import { useSpring, animated } from 'react-spring/hooks'
 import './styles.css'
 
-const useScript = useKeyframes.spring(async next => {
-  while (true) {
-    await next({
-      left: '0%',
-      top: '0%',
-      width: '100%',
-      height: '100%',
-      config: { duration: 0 },
-    })
-    await next({ height: '50%' })
-    await next({ width: '50%', left: '50%' })
-    await next({ top: '0%', height: '100%' })
-    await next({ top: '50%', height: '50%' })
-    await next({ width: '100%', left: '0%' })
-    await next({ width: '50%' })
-    await next({ top: '0%', height: '100%' })
-    await next({ width: '100%' })
-  }
-})
-
 export default function App() {
-  const props = useScript()
+  const props = useSpring({
+    from: { left: '0%', top: '0%', width: '0%', height: '0%' },
+    to: async next => {
+      while (1) {
+        await next({
+          left: '0%',
+          top: '0%',
+          width: '100%',
+          height: '100%',
+        })
+        await next({ height: '50%' })
+        await next({ width: '50%', left: '50%' })
+        await next({ top: '0%', height: '100%' })
+        await next({ top: '50%', height: '50%' })
+        await next({ width: '100%', left: '0%' })
+        await next({ width: '50%' })
+        await next({ top: '0%', height: '100%' })
+        await next({ width: '100%' })
+      }
+    },
+  })
   return (
     <div className="script-main">
       <animated.div className="script-box" style={props} />

examples/index.js

@@ -6,7 +6,7 @@ import examples from './components/examples-hooks'
 import './styles.css'
 
 const DEBUG = false
-//const DEBUG = 'simple'
+//const DEBUG = 'scrip'
 
 ReactDOM.render(
   <DemoGrid fullscreen={!!DEBUG}>