Optimize go page animation performance

Author: sandys

src/css/custom.css

@@ -1251,8 +1251,9 @@ html.docs-wrapper .table-of-contents__link--active {
 	position: absolute;
 	display: block;
 	pointer-events: none;
-	mix-blend-mode: screen;
-	will-change: transform, opacity, background-position;
+	backface-visibility: hidden;
+	transform-origin: center;
+	will-change: transform, opacity;
 }
 
 .go-motion-orb {
@@ -1262,10 +1263,10 @@ html.docs-wrapper .table-of-contents__link--active {
 	height: min(86vw, 78rem);
 	border-radius: 44% 56% 48% 52%;
 	background:
-		conic-gradient(from 18deg at 54% 46%, transparent 0deg, rgba(255, 136, 44, 0.58) 38deg, rgba(255, 213, 161, 0.28) 76deg, transparent 118deg, rgba(130, 59, 20, 0.26) 182deg, transparent 242deg, rgba(242, 139, 50, 0.46) 310deg, transparent 360deg),
-		radial-gradient(circle at 28% 32%, rgba(255, 214, 160, 0.34), transparent 26%),
-		radial-gradient(circle at 72% 66%, rgba(185, 79, 25, 0.34), transparent 32%);
-	filter: blur(34px);
+		radial-gradient(ellipse at 28% 32%, rgba(255, 214, 160, 0.42), transparent 34%),
+		radial-gradient(ellipse at 72% 66%, rgba(185, 79, 25, 0.4), transparent 42%),
+		linear-gradient(126deg, transparent 0 22%, rgba(255, 136, 44, 0.42) 38%, rgba(255, 213, 161, 0.18) 48%, transparent 72% 100%);
+	filter: blur(18px);
 	opacity: 0.01;
 	transform: translate3d(-10%, -8%, 0) scale(0.78) rotate(0deg);
 	animation: go-orb-drift 10s linear infinite;
@@ -1284,7 +1285,7 @@ html.docs-wrapper .table-of-contents__link--active {
 		linear-gradient(72deg, transparent 0 28%, rgba(125, 61, 24, 0.32) 43%, rgba(255, 177, 95, 0.4) 56%, transparent 76% 100%);
 	background-size: 72% 92%, 68% 76%, 76% 88%, 112% 132%, 128% 146%;
 	background-position: -8% 54%, 18% 10%, 74% 82%, 0% 50%, 100% 42%;
-	filter: blur(22px);
+	filter: none;
 	opacity: 0.01;
 	transform: translate3d(-8%, 0, 0) rotate(-6deg) scale(1.12);
 	animation: go-wave-flow 6.5s linear infinite;
@@ -1297,10 +1298,10 @@ html.docs-wrapper .table-of-contents__link--active {
 	height: min(82vw, 68rem);
 	border-radius: 50%;
 	background:
-		conic-gradient(from 210deg at 46% 54%, transparent 0deg, rgba(255, 213, 161, 0.2) 38deg, rgba(242, 139, 50, 0.46) 82deg, transparent 126deg, rgba(93, 43, 16, 0.32) 188deg, transparent 242deg, rgba(255, 177, 95, 0.38) 304deg, transparent 360deg),
-		radial-gradient(ellipse at 34% 44%, rgba(255, 177, 95, 0.34), transparent 34%),
-		radial-gradient(ellipse at 72% 34%, rgba(255, 238, 210, 0.2), transparent 26%);
-	filter: blur(48px);
+		radial-gradient(ellipse at 34% 44%, rgba(255, 177, 95, 0.38), transparent 42%),
+		radial-gradient(ellipse at 72% 34%, rgba(255, 238, 210, 0.18), transparent 34%),
+		linear-gradient(42deg, transparent 0 18%, rgba(93, 43, 16, 0.24) 34%, rgba(242, 139, 50, 0.36) 52%, transparent 78% 100%);
+	filter: blur(14px);
 	opacity: 0.01;
 	transform: translate3d(6%, 12%, 0) scale(0.84) rotate(0deg);
 	animation: go-current-fold 11s linear infinite;
@@ -1315,7 +1316,7 @@ html.docs-wrapper .table-of-contents__link--active {
 		linear-gradient(115deg, transparent 0 28%, rgba(255, 177, 95, 0.18) 34%, transparent 42% 100%);
 	background-size: 190px 138px, 236px 172px, 280px 190px, 150% 150%;
 	background-position: 0 0, 42px 26px, 90px 40px, 10% 60%;
-	filter: blur(0.5px);
+	filter: none;
 	opacity: 0.01;
 	transform: translate3d(0, 0, 0) scale(1);
 	animation: go-ember-shear 4.8s linear infinite;
@@ -1793,32 +1794,26 @@ html.docs-wrapper .table-of-contents__link--active {
 @keyframes go-wave-flow {
 	0%,
 	100% {
-		background-position: -8% 54%, 18% 10%, 74% 82%, 0% 50%, 100% 42%;
 		opacity: 0.01;
 		transform: translate3d(-8%, 0, 0) rotate(-6deg) scale(1.12);
 	}
 	10% {
-		background-position: 0% 48%, 28% 18%, 66% 72%, 18% 46%, 82% 50%;
 		opacity: 0.05;
 		transform: translate3d(-5%, -2%, 0) rotate(-3deg) scale(1.15);
 	}
 	24% {
-		background-position: 24% 34%, 46% 32%, 44% 64%, 48% 38%, 58% 58%;
 		opacity: 0.72;
 		transform: translate3d(5%, -6%, 0) rotate(4deg) scale(1.22);
 	}
 	43% {
-		background-position: 54% 48%, 68% 16%, 26% 76%, 82% 56%, 24% 42%;
 		opacity: 0.94;
 		transform: translate3d(11%, 5%, 0) rotate(-1deg) scale(1.3);
 	}
 	63% {
-		background-position: 76% 62%, 82% 44%, 58% 42%, 116% 64%, -4% 62%;
 		opacity: 0.64;
 		transform: translate3d(0, 11%, 0) rotate(6deg) scale(1.2);
 	}
 	84% {
-		background-position: 92% 52%, 94% 18%, 80% 70%, 142% 48%, -30% 48%;
 		opacity: 0.05;
 		transform: translate3d(-6%, 2%, 0) rotate(-3deg) scale(1.14);
 	}
@@ -1855,27 +1850,22 @@ html.docs-wrapper .table-of-contents__link--active {
 @keyframes go-ember-shear {
 	0%,
 	100% {
-		background-position: 0 0, 42px 26px, 90px 40px, 10% 60%;
 		opacity: 0.01;
 		transform: translate3d(0, 0, 0) scale(1);
 	}
 	18% {
-		background-position: 44px 20px, 86px 54px, 132px 72px, 28% 48%;
 		opacity: 0.06;
 		transform: translate3d(1%, -1%, 0) scale(1.01);
 	}
 	34% {
-		background-position: 102px 52px, 150px 88px, 196px 106px, 64% 42%;
 		opacity: 0.3;
 		transform: translate3d(2%, -2%, 0) scale(1.02);
 	}
 	55% {
-		background-position: 176px 94px, 230px 138px, 288px 152px, 92% 58%;
 		opacity: 0.18;
 		transform: translate3d(-1%, 1%, 0) scale(1.01);
 	}
 	76% {
-		background-position: 230px 132px, 302px 188px, 354px 204px, 126% 52%;
 		opacity: 0.05;
 		transform: translate3d(0, 0, 0) scale(1);
 	}