From 1371e76e0629a9834e110e7c4defb8522cd9b535 Mon Sep 17 00:00:00 2001
From: Adam Ullman <adam@tokbox.com>
Date: Mon, 18 Jun 2018 14:15:23 +1000
Subject: [PATCH] Fade out elements before we destroy them

---
 README.md  | 15 +++++++++++++++
 index.html |  3 +++
 2 files changed, 18 insertions(+)

diff --git a/README.md b/README.md
index 29d943e..c6d585a 100644
--- a/README.md
+++ b/README.md
@@ -181,6 +181,21 @@ This library adds an `ot-layout` className to elements once they have been layed
 
 This will make the elements be size 0x0 with opacity 0 when they are first added. Then when they have the `ot-layout` className added they will grow to the right size and fade in. You can see this effect in the [demo](https://aullman.github.io/opentok-layout-js/ "Layout-container Demo").
 
+Then if you want elements to fade out you can remove the `ot-layout` class from them before removing them from the DOM. Like so:
+
+```javascript
+session.on('streamDestroyed', (event) => {
+  event.preventDefault();
+  session.getSubscribersForStream(event.stream).forEach((subscriber) => {
+    subscriber.element.classList.remove('ot-layout');
+    setTimeout(() => {
+      subscriber.destroy();
+      layout();
+    }, 200);
+  });
+});
+```
+
 Big Elements
 --------
 
diff --git a/index.html b/index.html
index 72d54f3..d509a6f 100644
--- a/index.html
+++ b/index.html
@@ -167,8 +167,11 @@
         }
 
         function removeElement() {
+          layoutEl.firstChild.classList.remove('ot-layout');
+          setTimeout(function() {
             layoutEl.removeChild(layoutEl.firstChild);
             layout();
+          }, 200);
         }
 
         var resizeTimeout;