diff --git a/examples/00_hello_world.html b/examples/00_hello_world.html
index a57f5865..3694f3dc 100644
--- a/examples/00_hello_world.html
+++ b/examples/00_hello_world.html
@@ -4,56 +4,63 @@
 		<title>Tween.js / hello world!</title>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
+		<style>
+			.threedee {
+				position: absolute;
+				transform-style: preserve-3d;
+				transform: translate3d(0, 0, 0.1px);
+			}
+			.box {
+				width: 100px;
+				height: 100px;
+				padding: 1em;
+				box-sizing: border-box;
+			}
+		</style>
 	</head>
-	<body>
+	<body style="transform-style: preserve-3d; perspective: 800px;">
 		<div id="info">
 			<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
 			<h2>00 _ hello world</h2>
 			<p>Simple example for illustrating the creation and chaining of tweens.</p>
 		</div>
-		<div
-			id="target"
-			style="
-				position: absolute;
-				top: 100px;
-				left: 100px;
-				width: 100px;
-				height: 100px;
-				background: #a0dde9;
-				padding: 1em;
-			"
-		>
-			hello world!
+
+		<div class="threedee" style="transform: translate3d(0, 0, 0.1px);">
+			<div id="target" class="box" style="background: #a0dde9;">hello world!</div>
+		</div>
+
+		<div class="threedee" style="transform: translate3d(0, 120px, 0.1px);">
+			<div id="target2" class="box" style="background: #b0a0e9;">hello world again!</div>
 		</div>
 
 		<script src="../dist/tween.umd.js"></script>
 		<script src="js/RequestAnimationFrame.js"></script>
 		<script>
-			var position
-			var target
-			var tween, tweenBack
-
-			init()
+			init(document.getElementById('target'))
+			init(document.getElementById('target2'))
+			// init2()
 			animate()
 
-			function init() {
-				position = {x: 100, y: 100, rotation: 0}
-				target = document.getElementById('target')
-				tween = new TWEEN.Tween(position)
-					.to({x: 700, y: 200, rotation: 359}, 2000)
-					.delay(1000)
-					.easing(TWEEN.Easing.Elastic.InOut)
+			function init(target) {
+				const position = {x: 0, y: 0, rotation: 0}
+				const tween = new TWEEN.Tween(position)
+					.to({x: 700, y: 200, rotation: 360}, 2000)
+					.easing(TWEEN.Easing.Exponential.InOut)
 					.onUpdate(update)
 
-				tweenBack = new TWEEN.Tween(position)
-					.to({x: 100, y: 100, rotation: 0}, 3000)
-					.easing(TWEEN.Easing.Elastic.InOut)
+				const tweenBack = new TWEEN.Tween(position)
+					.to({x: 0, y: 0, rotation: 0}, 2000)
+					.easing(TWEEN.Easing.Exponential.InOut)
 					.onUpdate(update)
 
 				tween.chain(tweenBack)
 				tweenBack.chain(tween)
 
 				tween.start()
+
+				function update() {
+					target.style.transform = `translate3d(${position.x}px, ${position.y}px, 0.01px) rotateY(${position.rotation}deg)`
+				}
 			}
 
 			//If we register the callback animate, but the TWEEN.update(time) returns false,
@@ -61,16 +68,9 @@ <h2>00 _ hello world</h2>
 			function animate(time) {
 				var id = requestAnimationFrame(animate)
 
-				var result = TWEEN.update(time)
-
-				if (!result) cancelAnimationFrame(id)
-			}
+				var keepGoing = TWEEN.update(time)
 
-			function update() {
-				target.style.left = position.x + 'px'
-				target.style.top = position.y + 'px'
-				target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)'
-				target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)'
+				if (!keepGoing) cancelAnimationFrame(id)
 			}
 		</script>
 	</body>
diff --git a/package.json b/package.json
index 6122470c..f15533c2 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
 		"tween",
 		"interpolation"
 	],
-	"dependencies": {},
 	"scripts": {
 		"dev": "(npm run tsc-watch -- --preserveWatchOutput & p1=$!; npm run rollup-build -- --watch & p2=$!; wait $p1 $p2)",
 		"build": "rimraf dist .tmp && node scripts/write-version.js && npm run tsc && npm run rollup-build",
diff --git a/src/Easing.ts b/src/Easing.ts
index 9639783d..b528d390 100644
--- a/src/Easing.ts
+++ b/src/Easing.ts
@@ -219,6 +219,66 @@ const Easing = {
 			},
 		}
 	},
+	generateExponential: function (
+		// A value of 300 is makes the curve very close to Exponential with its value of 1024.
+		base = 300,
+	): {
+		In(amount: number): number
+		Out(amount: number): number
+		InOut(amount: number): number
+	} {
+		// https://www.desmos.com/calculator/pioplwo3zq
+
+		if (base <= 0) {
+			console.warn(
+				'base should be larger than 0. You might like to try between 20 and 400, maybe more. Setting a default value of 300.',
+			)
+			base = 300
+		}
+
+		function In(amount: number): number {
+			// Start similar to Exponential
+			let expo = base ** (amount - 1)
+
+			// adjust so it hits 0 when amount is 0
+			expo = expo - expo * (1 - amount)
+
+			return expo
+		}
+
+		function Out(amount: number): number {
+			// translate X by 1
+			amount = amount + 1
+
+			// Similar to In, but negate power to make the graph have a negative slope instead of positive.
+			let expo = base ** -(amount - 1)
+
+			// adjust so it hits 1 when amount is 1
+			expo = expo - expo * -(1 - amount)
+
+			// Flip it upside down, move it up by 1.
+			return -expo + 1
+		}
+
+		function InOut(amount: number): number {
+			amount *= 2
+
+			if (amount < 1) return In(amount) / 2
+
+			// Similar to In, but negate power to make the graph have a negative slope instead of positive.
+			let expo = base ** -(amount - 1)
+
+			// adjust so it hits 1 when amount is 1
+			expo = expo - expo * -(1 - amount)
+
+			// Flip it upside down, move it up by 2.
+			expo = -expo + 2
+
+			return expo / 2
+		}
+
+		return {In, Out, InOut}
+	},
 }
 
 export default Easing
