remove animated support from controller, fix up goo example

Author: drcmda

examples/components/examples.js

@@ -60,7 +60,7 @@ export default [
     tags: ['keyframes']
   },
   {
-    name: 'spring',
+    name: 'simple-spring',
     title: 'Simple spring',
     link: '#',
     tags: ['springs']

examples/demos/hooks/goo/index.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { useSpring, animated as anim } from 'react-spring/hooks'
+import { useSpring, useTrail, animated as anim } from 'react-spring/hooks'
 import './styles.css'
 
 const fast = { tension: 1200, friction: 40 }
@@ -8,24 +8,18 @@ const trans = (x, y) => `translate3d(${x}px,${y}px,0) translate3d(-50%,-50%,0)`
 
 export default function Goo() {
   const ref = useRef(null)
-  // Here we form a natural trail, one spring following another.
-  // You can either update springs by overwriting values when you re-render the component.
-  // Or you can use the set function, which allows you to bypass React alltogether.
-  // We're dealing with mouse-input here so we choose the latter in order to prevent rendering.
-  const [{ pos1 }, set] = useSpring(() => ({ pos1: [0, 0], config: fast }))
-  const [{ pos2 }] = useSpring(() => ({ pos2: pos1, config: slow }))
-  const [{ pos3 }] = useSpring(() => ({ pos3: pos2, config: slow }))
+  const [trail, set] = useTrail(3, () => ({
+    xy: [0, 0],
+    config: i => (i === 0 ? fast : slow),
+  }))
 
-  // We render the view like always, but we're using animated.el whereever
-  // animated values are being used. Just like with regular "native" springs this
-  // makes elements transient.
   return (
     <div
       ref={ref}
       className="goo-main"
       onMouseMove={e => {
         const rect = ref.current.getBoundingClientRect()
-        set({ pos1: [e.clientX - rect.left, e.clientY - rect.top] })
+        set({ xy: [e.clientX - rect.left, e.clientY - rect.top] })
       }}>
       <svg style={{ position: 'absolute', width: 0, height: 0 }}>
         <filter id="goo">
@@ -38,18 +32,12 @@ export default function Goo() {
       </svg>
       <div className="hooks-main">
         <div className="hooks-filter">
-          <anim.div
-            className="b1"
-            style={{ transform: pos3.interpolate(trans) }}
-          />
-          <anim.div
-            className="b2"
-            style={{ transform: pos2.interpolate(trans) }}
-          />
-          <anim.div
-            className="b3"
-            style={{ transform: pos1.interpolate(trans) }}
-          />
+          {trail.map((props, index) => (
+            <anim.div
+              key={index}
+              style={{ transform: props.xy.interpolate(trans) }}
+            />
+          ))}
         </div>
       </div>
     </div>

examples/demos/hooks/goo/styles.css

@@ -17,49 +17,49 @@
   display: none;
 }
 
-.b1, .b2, .b3 {
+.hooks-filter > div {
   position: absolute;
   will-change: transform;
   border-radius: 50%;
   background: lightcoral;
-  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
   opacity: 0.6;
 }
 
-.b1 {
+.hooks-filter > div:nth-child(1) {
   width: 120px;
   height: 120px;
 }
 
-.b2 {
+.hooks-filter > div:nth-child(2) {
   width: 250px;
   height: 250px;
 }
 
-.b3 {
+.hooks-filter > div:nth-child(3) {
   width: 150px;
   height: 150px;
 }
 
-.b1::after, .b2::after, .b3::after {
+.hooks-filter > div::after {
   content: '';
   position: absolute;
   top: 20px;
   left: 20px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: rgba(255,255,255,0.8);
+  background: rgba(255, 255, 255, 0.8);
 }
 
-.b2::after {
+.hooks-filter > div:nth-child(2)::after {
   top: 70px;
   left: 70px;
   width: 70px;
   height: 70px;
 }
 
-.b3::after {
+.hooks-filter > div:nth-child(3)::after {
   top: 50px;
   left: 50px;
   width: 50px;
@@ -72,4 +72,4 @@
   height: 100%;
   filter: url('#goo');
   overflow: hidden;
-}
+}

examples/demos/spring/index.js renamed to examples/demos/simple-spring/index.js

@@ -6,7 +6,7 @@ import examples from './components/examples-hooks'
 import './styles.css'
 
 const DEBUG = false
-//const DEBUG = "flag"
+//const DEBUG = "simple"
 
 ReactDOM.render(
   <DemoGrid>

examples/index.js

@@ -11,9 +11,12 @@ export default class AnimatedArray extends AnimatedArrayWithChildren {
         : array.map(n => new AnimatedValue(n))
   }
 
-  setValue = values =>
-    values.length === this.payload.length &&
-    values.forEach((v, i) => this.payload[i].setValue(v))
+  setValue = value => {
+    //if (Array.isArray(value)) {
+      if (value.length === this.payload.length)
+        value.forEach((v, i) => this.payload[i].setValue(v))
+    //} else this.payload.forEach((v, i) => this.payload[i].setValue(value))
+  }
   getValue = () => this.payload.map(v => v.getValue())
   interpolate = (config, arg) => new AnimatedInterpolation(this, config, arg)
 }

src/animated/AnimatedArray.js

@@ -67,6 +67,7 @@ export default class AnimatedValue extends AnimatedWithChildren {
     }
   }
 
+  setValue = value => this.value = value
   getValue = () => this.value
   updateStyles = () => findAnimatedStyles(this, this.animatedStyles)
   updateValue = value => this.flush((this.value = value))