diff --git a/example.html b/example.html
index 2581c10be..44361d326 100644
--- a/example.html
+++ b/example.html
@@ -161,8 +161,9 @@ <h1 class="site__title mega">Animate.css</h1>
 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="js/core.js"></script>
-    <script src="js/attention_seekers.js"></script>
-    <script src="js/bouncing_entrances.js"></script>
+	<script src="js/attention_seekers.js"></script>
+	<script src="js/bouncing_entrances.js"></script>
+    <script src="js/bouncing_exits.js"></script>
     <script>
         $(document).ready(function () {
             $("#useJs").change(function () {
diff --git a/js/bouncing_exits.js b/js/bouncing_exits.js
new file mode 100644
index 000000000..c1e3dfe68
--- /dev/null
+++ b/js/bouncing_exits.js
@@ -0,0 +1,86 @@
+animateCss.bounceOut = function (e) {
+    $(e).animate({ asdf: 1 }, 0)
+        .animate({ asdf: 0.9 }, {
+            step: function (now, fx) {
+                $(this).css('-webkit-transform', "scale(" + now + ")");
+            },
+            duration: 100,
+            easing: "swing",
+        })
+        .animate({ asdf: 0 }, {
+            step: function (now, fx) {
+                $(this).css('-webkit-transform', "scale(" + now + ")");
+            },
+            duration: 900,
+            easing: "easeInBack",
+            complete: function () {
+                $(e).css('-webkit-transform', "scale(1)");
+            }
+        })
+}
+animateCss.bounceOutDown = function (e) {
+    var mt = $(e).css("marginBottom");
+    var mb = $(e).css("paddingTop")
+    $(e).animate({
+        marginBottom: "-=20",
+        paddingTop: "+=20",
+    }, 100, "swing")
+    .animate({
+        marginBottom: "+=20",
+        paddingTop: "-=20",
+    }, 100, "swing")
+    .delay(100)
+    .animate({
+        marginBottom: "-=1000",
+        paddingTop: "+=1000",
+    }, 700, "swing")
+    .animate({
+        marginBottom: mt,
+        paddingTop: mb
+    }, 0)
+}
+animateCss.bounceOutLeft = function (e) {
+    var mt = $(e).css("marginLeft");
+    var mb = $(e).css("paddingRight")
+    $(e).animate({
+        marginLeft: "-=1000",
+        paddingRight: "+=1000",
+    }, 1000, "easeInBack")
+    .animate({
+        marginLeft: mt,
+        paddingRight: mb
+    }, 0)
+}
+animateCss.bounceOutRight = function (e) {
+    var mt = $(e).css("marginRight");
+    var mb = $(e).css("paddingLeft")
+    $(e).animate({
+        marginRight: "-=1000",
+        paddingLeft: "+=1000",
+    }, 1000, "easeInBack")
+    .animate({
+        marginRight: mt,
+        paddingLeft: mb
+    }, 0)
+}
+animateCss.bounceOutUp = function (e) {
+    var mt = $(e).css("marginTop");
+    var mb = $(e).css("paddingBottom")
+    $(e).animate({
+        marginTop: "-=20",
+        paddingBottom: "+=20",
+    }, 100, "swing")
+    .animate({
+        marginTop: "+=20",
+        paddingBottom: "-=20",
+    }, 100, "swing")
+    .delay(100)
+    .animate({
+        marginTop: "-=1000",
+        paddingBottom: "+=1000",
+    }, 700, "swing")
+    .animate({
+        marginTop: mt,
+        paddingBottom: mb
+    }, 0)
+}
\ No newline at end of file
diff --git a/sidebyside.html b/sidebyside.html
index 3c97b18e2..2d1b6e4f2 100644
--- a/sidebyside.html
+++ b/sidebyside.html
@@ -175,6 +175,7 @@ <h1 class="site__title mega">JS</h1>
     <script src="js/core.js"></script>
     <script src="js/attention_seekers.js"></script>
     <script src="js/bouncing_entrances.js"></script>
+    <script src="js/bouncing_exits.js"></script>
     <script>
         $(document).ready(function () {
             //$("#useJs").change(function () {