Merge branch 'develop'

.eslintrc.js

@@ -1,35 +1,37 @@
 module.exports = {
-	env: {
-		browser: true,
-		es2021: true,
+	"env": {
+		"browser": true,
+		"es2021": true,
+		"jest": true,
+		"node": true
 	},
-	extends: "plugin:prettier/recommended",
-	parserOptions: {
-		ecmaVersion: 12,
-		sourceType: "module",
+	"extends": "eslint:recommended",
+	"parserOptions": {
+		"ecmaVersion": 12,
+		"sourceType": "module",
 	},
-	plugins: ["prettier"],
-	rules: {
-		"prettier/prettier": "error",
-		"linebreak-style": 0,
-		indent: "off",
-		"comma-dangle": "off",
-		"class-methods-use-this": "off",
-		"quote-props": "off",
-		"default-case": "off",
-		"no-new": "off",
-		"import/no-cycle": "warn",
-		"max-len": [
-			"warn",
-			{
-				code: 120,
-			},
+	"rules": {
+		"indent": [
+			"error",
+			"tab"
 		],
-		"no-else-return": "off",
-		"no-use-before-define": "off",
-		"object-curly-newline": "off",
-		// "no-underscore-dangle": [{ enforceInMethodNames: false }],
-		"no-underscore-dangle": "warn",
-		"import/no-cycle": "off",
-	},
+		"linebreak-style": [
+			"error",
+			"windows"
+		],
+		"quotes": [
+			"error",
+			"double"
+		],
+		"semi": [
+			"error",
+			"always"
+		],
+		"no-unused-vars": [
+			"warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }
+		],
+		"react/prop-types": [
+			0
+		],
+	}
 };

README.md

@@ -15,7 +15,7 @@ https://marknorrapscm.github.io/number-rollup/
 
 ## Features
 
--   Smooth rising / falling number animations
+-   Smooth rising / falling number animations with easing options
 -   VanillaJS
 -   Zero dependencies
 -   1.3KB gzipped
@@ -51,7 +51,9 @@ numberRollup({
 	id: "example-1",
 	startNumber: 0,
 	endNumber: 500,
-	duration: 500, // Milliseconds
+	duration: 500, // ms
+	formatNumber: (s) => `£${s}`, // optional
+	easing: "easeIn" 			  // optional
 });
 ```
 
@@ -90,3 +92,13 @@ The duration of the animation in milliseconds. Must be an integer.
 
 `formatNumber`: _function_ (optional)<br />
 A function that will be applied to the animated number each time before it is drawn. For example, turning `500` into `$500`. See the demo for a usage example.
+
+`easing`: _String_ (optional)<br />
+The easing function to be applied. Defaults to *linear* if none specified. Available options:
+
+* `linear`
+* `easeIn`
+* `easeOut`
+* `easeInQuintic`
+* `easeOutQuintic`
+* `easeInOut`

demo/src/dev.js

@@ -21,6 +21,7 @@ const setupClickEvents = () => {
 			endNumber: 500,
 			duration: 500,
 			formatNumber: myCustomFormatter,
+			easing: "easeInQuintic"
 		});
 	});
 

demo/src/index.html

@@ -113,7 +113,8 @@
 								startNumber: 0,
 								endNumber: 500,
 								duration: 500,
-								formatNumber: myCustomFormatter
+								formatNumber: myCustomFormatter,
+								easing: "easeInQuintic"
 							});
 
 							const myCustomFormatter = function (v) {
@@ -164,7 +165,7 @@
 						0
 					</button>
 					<button class="btn btn-secondary number-rollup" data-number-rollup-start="100" data-number-rollup-end="100000"
-						data-number-rollup-duration="1000">
+						data-number-rollup-duration="1000"  data-number-rollup-easing="easeOutQuintic">
 						0
 					</button>
 					<button class="btn btn-secondary number-rollup" data-number-rollup-start="10000" data-number-rollup-end="0"
@@ -178,7 +179,7 @@
 					<pre>
 						<code class="language-html">
 							<button class="number-rollup" data-number-rollup-start="0" data-number-rollup-end="500" data-number-rollup-duration="250">0</button>
-							<button class="number-rollup" data-number-rollup-start="100" data-number-rollup-end="100000"data-number-rollup-duration="1000">0</button>
+							<button class="number-rollup" data-number-rollup-start="100" data-number-rollup-end="100000"data-number-rollup-duration="1000" data-number-rollup-easing="easeOutQuintic">0</button>
 							<button class="number-rollup" data-number-rollup-start="10000" data-number-rollup-end="0"data-number-rollup-duration="1000">0</button>
 						</code>
 					</pre>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "number-rollup",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "VanillaJS implementation of an animated rising / falling number",
 	"author": "marknorrapscm",
 	"browser": "dist/index.js",
@@ -33,11 +33,8 @@
 		"compression-webpack-plugin": "^6.0.3",
 		"core-js": "^3.6.4",
 		"eslint": "^7.10.0",
-		"eslint-config-prettier": "^6.12.0",
-		"eslint-plugin-prettier": "^3.1.4",
 		"html-webpack-plugin": "^4.0.4",
 		"jest": "^26.6.1",
-		"prettier": "^2.1.2",
 		"terser-webpack-plugin": "^2.3.5",
 		"webpack": "^4.42.1",
 		"webpack-cli": "^3.3.11",

src/draw.js

@@ -4,33 +4,9 @@ export default (target, newNumberRounded) => {
 };
 
 const getNumberToDraw = (newNumberRounded, target) => {
-	let numberToDraw = getNumber(newNumberRounded, target.endNumber, target.direction);
-
 	if (target.formatNumber) {
-		numberToDraw = target.formatNumber(numberToDraw);
-	}
-
-	return numberToDraw;
-};
-
-const getNumber = (newNumberRounded, endNumber, direction) => {
-	let numberToUse;
-
-	if (direction === "ascending") {
-		if (newNumberRounded < endNumber) {
-			numberToUse = newNumberRounded;
-		} else {
-			numberToUse = endNumber;
-		}
-	} else if (direction === "descending") {
-		if (newNumberRounded > endNumber) {
-			numberToUse = newNumberRounded;
-		} else {
-			numberToUse = endNumber;
-		}
+		return target.formatNumber(newNumberRounded);
 	} else {
-		console.error("getNumber() not set");
+		return newNumberRounded;
 	}
-
-	return numberToUse;
-};
+};

src/get-new-number.js

@@ -0,0 +1,61 @@
+/* eslint-disable indent */
+
+export default (msElapsedSinceStart, target) => {
+	console.log(target);
+	const { startNumber, endNumber } = target;
+
+	const newNumber = applyEasing(msElapsedSinceStart, target);
+
+	if (startNumber > endNumber) {
+		const newNumberCorrected = startNumber - newNumber;
+		return Math.max(newNumberCorrected, endNumber);
+	} else {
+		return Math.min(newNumber, endNumber);
+	}
+};
+
+/**
+ * Easing functions implemented from http://gizma.com/easing/
+ */
+const applyEasing = (msElapsedSinceStart, target) => {
+	const { startNumber, endNumber, duration, easing } = target;
+	const smallestNumber = Math.min(startNumber, endNumber);
+	const range = getRange(startNumber, endNumber);
+
+	switch (easing.toLowerCase()) {
+		case "linear":
+		default: {
+			return Math.floor(((range * msElapsedSinceStart) / duration) + smallestNumber);
+		}
+		case "easein": {
+			const t = msElapsedSinceStart / duration;
+			return Math.floor(range * t * t + smallestNumber);
+		}
+		case "easeout": {
+			const t = msElapsedSinceStart / duration;
+			return Math.floor((range * -1) * t * (t - 2) + smallestNumber) + 1;
+		}
+		case "easeinquintic": {
+			const t = msElapsedSinceStart / duration;
+			return Math.floor(range * t * t * t * t * t + smallestNumber);
+		}
+		case "easeoutquintic": {
+			const t = (msElapsedSinceStart / duration) - 1;
+			return Math.floor(range * ((t * t * t * t * t) + 1) + smallestNumber);
+		}
+		case "easeinout": {
+			const t = msElapsedSinceStart / (duration / 2);
+
+			if (t < 1) {
+				return Math.floor(range / 2 * t * t * t * t * t + smallestNumber);
+			} else {
+				const t2 = t - 2;
+				return Math.floor(range / 2 * (t2 * t2 * t2 * t2 * t2 + 2) + smallestNumber);
+			}
+		}
+	}
+};
+
+const getRange = (startNumber, endNumber) => {
+	return Math.max(startNumber, endNumber) - Math.min(startNumber, endNumber);
+};