fix(whatislove-dev/careers-whatislove-dev): imporve animation perform…

…ance wd-591 (#633)
what1s1ove · Jun 15, 2024 · 7018131 · 7018131
1 parent 24fe1e5
commit 7018131
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 2 deletions.
diff --git a/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-initial/styles.css b/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-initial/styles.css
@@ -14,6 +14,7 @@
 	cursor: pointer;
 	background-color: transparent;
 	border: 0;
+	will-change: transform;
 	animation: glitch var(--timing-function-glitch) 6ms infinite;
 
 	&:focus-visible {

diff --git a/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-process/styles.css b/apps/careers-whatislove-dev/src/pages/root/libs/components/screen-process/styles.css
@@ -89,5 +89,6 @@
 	color: var(--color-dark);
 	-webkit-text-stroke: 2px var(--color-light);
 	text-align: center;
+	will-change: transform;
 	animation: glitch var(--timing-function-glitch) 6ms infinite;
 }
diff --git a/apps/whatislove-dev/src/scripts/pages/main/libs/components/easter-egg/easter-egg.js b/apps/whatislove-dev/src/scripts/pages/main/libs/components/easter-egg/easter-egg.js
@@ -169,8 +169,8 @@ class EasterEgg {
 		)
 		let { x, y } = getNodeRandomCoords(easterEggButtonWrapperNode)
 
-		easterEggButtonWrapperNode.style.top = `${y}px`
-		easterEggButtonWrapperNode.style.left = `${x}px`
+		easterEggButtonWrapperNode.style.insetBlockStart = `${y}px`
+		easterEggButtonWrapperNode.style.insetInlineStart = `${x}px`
 	}
 
 	/**

diff --git a/apps/whatislove-dev/src/styles/blocks/header.css b/apps/whatislove-dev/src/styles/blocks/header.css
@@ -178,6 +178,7 @@
 .header__menu-item {
 	&[class*="--careers"] {
 		@media (prefers-reduced-motion: no-preference) {
+			will-change: transform;
 			animation: glitch cubic-bezier(0.5, -0.25, 0.75, 1) 6ms infinite;
 		}
 	}

diff --git a/apps/whatislove-dev/src/styles/blocks/not-easter-egg.css b/apps/whatislove-dev/src/styles/blocks/not-easter-egg.css
@@ -14,6 +14,7 @@
 	margin: 0;
 	overflow: hidden;
 	border-radius: 50%;
+	will-change: inset-block-start, inset-inline-start;
 
 	&::before {
 		position: absolute;
@@ -28,6 +29,7 @@
 		background-color: hsl(var(--color-yellow-100) / 20%);
 		transform: skewX(-25deg);
 		translate: 0 -50%;
+		will-change: inset-inline-start;
 		animation: shine 5s infinite;
 	}