cleanup and gsap fix

nicopowa · Aug 15, 2023 · 8df7dff · 8df7dff
1 parent b32039e
commit 8df7dff
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,9 @@ A web page with a menu, a picture and some text doesn't require 2Mb JS code.
 
 # Demo
 
-https://nicopowa.github.io/effect/
+https://nicopowa.github.io/effect/index.html
+
+same code with gsap wrapper : https://nicopowa.github.io/effect/gsap.html
 
 # How it works
 - play all effects from a single frame loop

diff --git a/compile.json b/compile.json
@@ -43,7 +43,6 @@
 	"package": {
 		"output_file": "js/main.min.js",
 		"files": [
-			"js/effect.js", 
 			"js/main.js"
 		],
 		"output_style": "css/main.min.css",
@@ -57,7 +56,7 @@
 
 		],
 		"externs": [
-
+			"effect"
 		],
 		"comment": "© ILUSIO %year https://blog.ilusio.dev"
 	}

diff --git a/css/effect.package.min.css b/css/effect.package.min.css
diff --git a/effect.bundle.min.js b/effect.bundle.min.js
diff --git a/gsap.html b/gsap.html
@@ -8,9 +8,9 @@
 
 		<link rel="stylesheet" href="css/style.css"> 
 
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
 		<script src="js/effect.gsap.js"></script>
-		<script src="js/test_effect.js"></script>
+		<script src="js/main.js"></script>
 
 	</head>
 	<body>

diff --git a/index.html b/index.html
@@ -10,7 +10,8 @@
 
 		<link rel="stylesheet" href="css/main.min.css">
 
-		<script src="js/main.min.js"></script>
+		<script src="js/effect.default.release.min.js"></script>
+		<script src="js/effect.package.release.min.js"></script>
 
 	</head>
 

diff --git a/js/effect.debug.min.js b/js/effect.debug.min.js
diff --git a/js/effect.gsap.js b/js/effect.gsap.js
@@ -1,38 +1,65 @@
+window.isGSAP = true;
+
 class Effect { // unify Effect & TweenMax calls
 
+	//target, frames, props, ease, delay, override, callback
+
 	constructor(target, frames, props, ease, delay, override, callback) {
-		ease = ease || "no";
-		delay = delay * toSec || 0;
+
 		this.target = target;
-		this.secs = frames * toSec;
 		this.callback = callback || function() {};
-		this.params = Object.assign(props, {delay: delay, ease: Effect.ease(ease)});
+		this.params = Object.assign(props, {duration: frames * toSec, delay: (delay || 0) * toSec, ease: ease()});
+
 	}
 
 	play() {
-		return Effect.asyncTween(this.target, this.secs, this.params, this.callback);
+
+		return Effect.asyncTween(this.target, this.params, this.callback);
+
+	}
+
+	static no() {
+
+		return Linear.easeNone;
+
 	}
 
-	static ease(name) {
-		let eases = {
-			"no": Linear.easeNone,
-			"quartIn": Quart.easeIn,
-			"quartOut": Quart.easeOut,
-			"quartInOut": Quart.easeInOut,
-			"bounceOut": Bounce.easeOut
-		};
-		return eases[name];
+	static quartOut() {
+
+		return Quart.easeOut;
+
 	}
 
-	static asyncTween(target, duration, options, callback) { // savage TweenMax onComplete promise
-		return new Promise(resolve => TweenMax.to(target, duration, Object.assign(options, {"onComplete": function() {
-			callback();
-			resolve();
-		}})));
+	static quartIn() {
+
+		return Quart.easeIn;
+
 	}
 
-	/*static asyncTween(target, duration, options) {
-		return new Promise(resolve => TweenMax.to(target, duration, Object.assign(options, {"onComplete": resolve}))); // savage TweenMax onComplete promise
-	}*/
+	static quartInOut() {
+
+		return Quart.easeInOut;
+
+	}
+
+	static bounceOut() {
+
+		return Bounce.easeOut;
+
+	}
+
+	static asyncTween(target, options, callback) { 
+
+		return gsap
+		.to(
+			target, 
+			options
+		)
+		.then(
+			() => 
+				callback()
+		);
+
+	}
 
 }
diff --git a/js/effect.min.js b/js/effect.min.js
diff --git a/js/effect.package.release.min.js b/js/effect.package.release.min.js
diff --git a/js/main.js b/js/main.js
@@ -62,12 +62,13 @@ function square(left, top, width, height, index) {
 
 async function main() {
 
-	Effect["bounceOut"] = function(t, b, c, d) { // some bounce
-		if((t /= d) < (1 / 2.75)) return c * (7.5625 * t * t) + b;
-		else if(t < (2 / 2.75)) return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
-		else if(t < (2.5 / 2.75)) return c * (7.5625 * (t -= (2.25 / 2.75))*t + .9375) + b;
-		else return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
-	}
+	if(typeof window["isGSAP"] === "undefined") 
+		Effect["bounceOut"] = function(t, b, c, d) { // some bounce
+			if((t /= d) < (1 / 2.75)) return c * (7.5625 * t * t) + b;
+			else if(t < (2 / 2.75)) return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
+			else if(t < (2.5 / 2.75)) return c * (7.5625 * (t -= (2.25 / 2.75))*t + .9375) + b;
+			else return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
+		};
 
 	let sq1 = square(10, 10, 100, 100, "click me");
 	sq1.style.backgroundColor = "rgb(255, 0, 0)";