Stop canvases that are not in viewport

src/scripts/canvas.js

@@ -1,13 +1,29 @@
+/* eslint-disable */
+import inView from 'in-view';
+
 class Canvas {
   constructor() {
-    this.connect = new CABLES.Patch({
+    this.initConnectCanvas();
+    this.initKleinCanvas();
+  }
+
+  initConnectCanvas() {
+    const connect = new CABLES.Patch({
       patchFile: 'assets/connect.json',
       prefixAssetPath: '',
       glCanvasId: 'connect',
       glCanvasResizeToWindow: true,
-      silent: true
+      silent: true,
     });
 
+    connect.pause();
+
+    inView.offset(0);
+    inView('.team').on('enter', () => connect.resume());
+    inView('.team').on('exit', () => connect.pause());
+  }
+
+  initKleinCanvas() {
     CABLES.EMBED.addPatch(
       'klein',
       {
@@ -16,9 +32,14 @@ class Canvas {
         silent: true
       }
     )
+
+    CABLES.patch.pause();
+
+    inView('.hero').on('enter', () => CABLES.patch.resume());
+    inView('.hero').on('exit', () => CABLES.patch.pause());
   }
 }
 
 export default function init() {
   new Canvas();
-};
+}