Merge pull request #132 from tomsjer/master

cancelAnimation when calling destroy method
dixonandmoe · Oct 16, 2018 · d56f3e0 · d56f3e0
2 parents cf855f4 + 0907ac3
commit d56f3e0
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 2 deletions.
diff --git a/rellax.js b/rellax.js
@@ -42,7 +42,13 @@
       window.mozRequestAnimationFrame ||
       window.msRequestAnimationFrame ||
       window.oRequestAnimationFrame ||
-      function(callback){ setTimeout(callback, 1000 / 60); };
+      function(callback){ return setTimeout(callback, 1000 / 60); };
+
+    // store the id for later use
+    var loopId = null;
+
+    // check what cancelAnimation method to use
+    var clearLoop = window.cancelAnimationFrame || window.mozCancelAnimationFrame || clearTimeout;
 
     // check which transform property to use
     var transformProp = window.transformProp || (function(){
@@ -266,7 +272,7 @@
       }
 
       // loop again
-      loop(update);
+      loopId = loop(update);
     };
 
     // Transform3d on parallax element
@@ -301,6 +307,10 @@
         window.removeEventListener('resize', init);
         pause = true;
       }
+
+      // Clear the animation loop to prevent possible memory leak
+      clearLoop(loopId);
+      loopId = null;
     };
 
     // Init

diff --git a/tests/destroy.html b/tests/destroy.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title></title>
+	<style>
+		html, body{
+			color: #223;
+			font-size: 21pt;
+			margin: 0; padding: 0;
+		}
+		nav{
+			font-size: 21pt;
+			line-height: 1.5em;
+			position: fixed;
+			bottom: 0; left: 0;
+		}
+		nav a{ color: inherit; }
+
+		.col{
+			text-align: center;
+			width: 50%;
+			float: left;
+			box-sizing: border-box;
+		}
+
+		h4{ text-align: center;}
+
+		.container{
+			display: flex;
+			align-items: center;
+			outline: 1px solid #eed;
+			font-size: 42pt;
+			/*padding: 37.5vh 12.5vw;*/
+			padding: 0 12.5vw;
+			height: 200vh;
+		}
+		.block{
+			background: #223;
+			color: #eed;
+			line-height: 25vh;
+			text-align: right;
+			/*padding: 0 42pt;*/
+			margin-top: 20vh;
+			height: 200px;
+			width: 400px;
+			position: relative;
+		}
+		span{
+			background: #eed;
+			color: #223;
+			line-height: 25vh;
+			text-align: left;
+			padding: 0 42pt;
+			display: block;
+			width: 50%;
+			position: absolute;
+			top: 0; left: 0;
+			box-sizing: border-box;
+		}
+    button {
+      position: fixed;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+	</style>
+</head>
+<body>
+  <h4>cancelAnimation upon destroy <br><small>(check performance panel)</small></h4>
+  <button id="destroy">destroy</button>
+	<section>
+		<div class="col">
+			<br>With Percentage (0.5) <br><br>
+			<div id="21" class="container"><div class="block">#1<span class="rellax" data-rellax-percentage="0.5">#1</span></div></div>
+			<div id="22" class="container"><div class="block">#2<span class="rellax" data-rellax-percentage="0.5">#2</span></div></div>
+			<div id="23" class="container"><div class="block">#3<span class="rellax" data-rellax-percentage="0.5">#3</span></div></div>
+			<div id="24" class="container"><div class="block">#4<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#4</span></div></div>
+			<div id="25" class="container"><div class="block">#5<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#5</span></div></div>
+			<div id="26" class="container"><div class="block">#6<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#6</span></div></div>
+		</div>
+		<div class="col">
+			<br>Without Percentage <br><br>
+			<div id="21" class="container"><div class="block">#1<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#1</span></div></div>
+			<div id="22" class="container"><div class="block">#2<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#2</span></div></div>
+			<div id="23" class="container"><div class="block">#3<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#3</span></div></div>
+			<div id="24" class="container"><div class="block">#4<span class="rellax">#4</span></div></div>
+			<div id="25" class="container"><div class="block">#5<span class="rellax">#5</span></div></div>
+			<div id="26" class="container"><div class="block">#6<span class="rellax">#6</span></div></div>
+		</div>
+	</section>
+
+	<!-- Scripts -->
+	<script src="../rellax.js"></script>
+	<script>
+
+    var rellax = new Rellax('.rellax', {
+      center: true,
+      callback: function(positions) {
+        // callback every position change
+        console.log(positions);
+      }
+    });
+
+    // test cancaelAnimation on Rellax destroy
+    document.querySelector('#destroy').addEventListener('click', function() {
+
+      rellax.destroy();
+
+    }, false);
+	</script>
+</body>
+</html>