feat(ui): use motion for page, tab, switch and press gestures animation (#2406)

Author: bajrangCoder

bun.lock

@@ -182,6 +182,7 @@
     "markdown-it-texmath": "^1.0.0",
     "mermaid": "^11.14.0",
     "mime-types": "^3.0.2",
+    "motion": "^12.42.0",
     "mustache": "^4.2.0",
     "picomatch": "^4.0.4",
     "url-parse": "^1.5.10",

package-lock.json

@@ -1,3 +1,4 @@
+import { animate, press } from "motion";
 import tile from "../tile";
 
 export default class WCPage extends HTMLElement {
@@ -53,6 +54,22 @@ export default class WCPage extends HTMLElement {
 			></span>
 		);
 
+		press(this.#leadBtn, (element) => {
+			if (document.body.classList.contains("no-animation")) return;
+			animate(
+				element,
+				{ scale: 0.85 },
+				{ type: "spring", stiffness: 400, damping: 20 },
+			);
+			return () => {
+				animate(
+					element,
+					{ scale: 1 },
+					{ type: "spring", stiffness: 400, damping: 20 },
+				);
+			};
+		});
+
 		this.#header = tile({
 			type: "header",
 			text: title || "Page",
@@ -80,6 +97,29 @@ export default class WCPage extends HTMLElement {
 
 	connectedCallback() {
 		this.classList.remove("hide");
+		const isPrimary = this.classList.contains("primary");
+		const isNoTransition = this.classList.contains("no-transition");
+
+		if (!isPrimary) {
+			if (document.body.classList.contains("no-animation")) {
+				this.style.opacity = "";
+			} else {
+				this.style.opacity = "0";
+				animate(
+					this,
+					{
+						opacity: 1,
+					},
+					{
+						duration: isNoTransition ? 0.08 : 0.14,
+						ease: "easeOut",
+					},
+				).then(() => {
+					this.style.opacity = "";
+				});
+			}
+		}
+
 		if (typeof this.onconnect === "function") this.onconnect();
 		this.#on.show.forEach((cb) => cb.call(this));
 	}
@@ -120,12 +160,29 @@ export default class WCPage extends HTMLElement {
 	}
 
 	hide() {
-		this.classList.add("hide");
 		if (typeof this.onhide === "function") this.onhide();
-		setTimeout(() => {
+
+		const isPrimary = this.classList.contains("primary");
+		const isNoTransition = this.classList.contains("no-transition");
+
+		if (isPrimary || document.body.classList.contains("no-animation")) {
 			this.remove();
 			this.handler.remove();
-		}, 150);
+		} else {
+			animate(
+				this,
+				{
+					opacity: 0,
+				},
+				{
+					duration: isNoTransition ? 0.08 : 0.12,
+					ease: "easeIn",
+				},
+			).then(() => {
+				this.remove();
+				this.handler.remove();
+			});
+		}
 	}
 
 	get body() {
@@ -239,6 +296,7 @@ class PageHandler {
 	 * Replace current element with a replacement element
 	 */
 	replaceEl() {
+		if (this.$el.classList.contains("primary")) return;
 		this.$el.off("hide", this.onhide);
 		if (!this.$el.isConnected || this.$replacement.isConnected) return;
 		if (typeof this.onReplace === "function") this.onReplace();
@@ -285,7 +343,7 @@ class PageHandler {
  */
 function handlePagesForSmoothExperience() {
 	const $pages = [...tag.getAll("wc-page")];
-	for (let $page of $pages.slice(0, -1)) {
+	for (let $page of $pages.slice(0, -2)) {
 		$page.handler.replaceEl();
 	}
 }

package.json

@@ -1,5 +1,6 @@
 import "./styles.scss";
 import Ref from "html-tag-js/ref";
+import { animate } from "motion";
 
 /**
  * @typedef {Object} Checkbox
@@ -23,35 +24,81 @@ import Ref from "html-tag-js/ref";
  * @param {string} [size] Size of checkbox
  * @returns {Checkbox & HTMLLabelElement}
  */
-function Checkbox(text, checked, name, id, type, ref, size) {
+function Checkbox(text, checked, name, id, type, ref, size, isSwitch) {
 	if (typeof text === "object") {
-		({ text, checked, name, id, type, ref, size } = text);
+		({ text, checked, name, id, type, ref, size, isSwitch } = text);
 	}
 
 	size = size || "1rem";
 
 	const $input = ref || Ref();
+	const $handle = Ref();
 	const $checkbox = (
-		<label className="input-checkbox">
+		<label className={`input-checkbox ${isSwitch ? "switch" : ""}`}>
 			<input
 				ref={$input}
 				checked={checked}
 				type={type || "checkbox"}
 				name={name}
 				id={id}
+				onchange={handleChange}
 			/>
-			<span style={{ height: size, width: size }} className="box"></span>
+			<span style={{ height: size, width: size }} className="box">
+				<span ref={$handle} className="handle"></span>
+			</span>
 			<span>{text}</span>
 		</label>
 	);
 
+	function updateToggle(animateToggle = true) {
+		const isSwitch =
+			$checkbox.classList.contains("switch") ||
+			$checkbox.closest(
+				".detail-settings-list, .main-settings-list, .settings-search-section",
+			) !== null;
+
+		if (isSwitch && $handle.el) {
+			const isChecked = !!$input.el.checked;
+			const targetTransform = isChecked
+				? "translate3d(1.12rem, 0, 0)"
+				: "translate3d(0, 0, 0)";
+
+			if (animateToggle && !document.body.classList.contains("no-animation")) {
+				animate(
+					$handle.el,
+					{
+						transform: targetTransform,
+					},
+					{
+						type: "spring",
+						stiffness: 500,
+						damping: 28,
+					},
+				).then(() => {
+					$handle.el.style.transform = targetTransform;
+				});
+			} else {
+				$handle.el.style.transform = targetTransform;
+			}
+		}
+	}
+
+	function handleChange() {
+		updateToggle(true);
+	}
+
+	requestAnimationFrame(() => {
+		updateToggle(false);
+	});
+
 	Object.defineProperties($checkbox, {
 		checked: {
 			get() {
 				return !!$input.el.checked;
 			},
 			set(value) {
 				$input.el.checked = value;
+				updateToggle(true);
 			},
 		},
 		onclick: {

src/components/WebComponents/wcPage.js

@@ -15,27 +15,29 @@
     border: solid 1px var(--secondary-text-color);
     margin: 0 5px;
 
-    &::after {
-      content: '';
+    .handle {
       display: block;
       height: 80%;
       width: 80%;
       background-color: #3399ff;
       background-color: var(--button-background-color);
       margin: auto;
       border-radius: 2px;
+      transition: opacity 140ms ease;
     }
   }
 
   input:checked {
-    &+.box::after {
+    &+.box .handle {
       opacity: 1;
     }
   }
 
-  input:not(:checked) {
-    &+.box::after {
-      opacity: 0;
+  &:not(.switch) {
+    input:not(:checked) {
+      &+.box .handle {
+        opacity: 0;
+      }
     }
   }
 }