bouncing effect on scene

src/createArtwork.js

@@ -61,10 +61,10 @@ function createArtwork (canvas, params = {}) {
     canvas,
     sceneBounds: new THREE.Box2(),
     unitScale: new THREE.Vector2(1, 1),
-    colorPalette: colorPalettes.light
+    colorPalette: colorPalettes.dark
     // will contain some other properties for scenes to use, like width/height
   };
-  
+
   const tickFPS = 30;
 
   let raf;
@@ -110,6 +110,10 @@ function createArtwork (canvas, params = {}) {
     clear,
     reset,
     stop,
+    bounce,
+    spawn () {
+
+    },
     randomize () {
       traverse('onTrigger', 'randomize');
     },
@@ -172,6 +176,30 @@ function createArtwork (canvas, params = {}) {
     draw();
   }
 
+  function bounce () {
+    const scale = { value: scene.scale.x };
+    anime({
+      targets: scale,
+      easing: 'easeInQuad',
+      value: 0.9,
+      duration: 250,
+      update: () => {
+        scene.scale.setScalar(scale.value);
+      },
+      complete: () => {
+        anime({
+          duration: 250,
+          targets: scale,
+          easing: 'easeOutQuad',
+          value: 1,
+          update: () => {
+            scene.scale.setScalar(scale.value);
+          }
+        });
+      }
+    });
+  }
+
   function clear () {
     // stop all animations, clear shapes
     stoppedAnimations.length = 0;

src/index.js

@@ -42,6 +42,8 @@ artwork.load().then(() => {
       artwork.clear();
     } else if (key === 't') {
       artwork.swapPalettes();
+    } else if (key === 'b') {
+      artwork.bounce();
     }
   });
 });