Skip animations with non-default parameters for v3.0 (#291)

camillobruni · web-flow · commit cdc22d42176e · 2026-03-06T00:46:00.000+01:00
We don't want CSS animations to interfere with short running measurements which
can easaily happen if you only run a single workload.
diff --git a/index.html b/index.html
@@ -51,9 +51,6 @@
     }
 
     async function initialize() {
-        if (!JetStreamParams.isDefault) {
-            showNonDefaultParams();
-        }
         if (globalThis.allIsGood) {
             try {
                 await JetStream.initialize();
@@ -71,6 +68,7 @@
     }
     
     function showNonDefaultParams() {
+        document.body.classList.remove("animate");
         document.body.classList.add("nonDefaultParams"); 
         const body = document.querySelector("#non-standard-params-table tbody");
         const nonDefaultParams = JetStreamParams.nonDefaultParams;
@@ -89,7 +87,7 @@
     <script src="JetStreamDriver.js"></script>
 
 </head>
-<body onload="initialize()">
+<body onload="initialize()" class="animate">
 <h1 class="logo">
     <div id="jetstreams">
         <a href="index.html" class="logo-image">JetStream 3</a>
@@ -128,5 +126,10 @@ <h2>Non-standard Parameters</h2>
     <div id="results"></div>
 </main>
 <iframe id="magic"></iframe>
+<script>
+    if (!JetStreamParams.isDefault) {
+        showNonDefaultParams()
+    }
+</script>
 </body>
 </html>
diff --git a/resources/JetStream.css b/resources/JetStream.css
@@ -179,20 +179,27 @@ img {
     background-position: center;
     background-image: url("JetStream3Logo.svg");
     color: transparent;
-    animation: swingin 350ms ease-out forwards;
     will-change: transform, opacity;
     height: 75px;
 }
 
+body.animate .logo .logo-image {
+    animation: swingin 350ms ease-out forwards;
+}
+
 #jetstreams {
-    background-image: url("jetstreams.svg");
+    background-image: url("jetstreams-static.svg");
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
     padding: 2rem 0;
     margin: -2rem 0;
 }
 
+body.animate #jetstreams {
+    background-image: url("jetstreams.svg");
+}
+
 #jetstreams svg {
     width: 100%;
     max-height: 120px;
@@ -219,6 +226,10 @@ article,
 .summary {
     max-width: 70rem;
     margin: 0 auto 0 auto;
+}
+
+body.animate article,
+body.animate .summary {
     opacity: 0;
     animation: fadein 0.5s ease-in-out forwards;
     animation-delay: 200ms;
@@ -358,7 +369,8 @@ a.button {
     user-select: none;
 }
 
-a.button {
+
+body.animate a.button {
     animation: fadein 500ms ease-in forwards, scaledown 500ms ease-in forwards;
     opacity: 0;
 }
@@ -466,14 +478,17 @@ a.button {
     justify-content: space-around;
     gap: var(--gap);
     margin: 0 calc(var(--gap) * -1) 0 calc(-var(--gap) * -1);
-    animation: fadein 500ms ease-out forwards;
-    opacity: 0;
     overflow-y: auto;
     flex: 1;
     padding-bottom: var(--gap);
     box-sizing: border-box;
 }
 
+body.animate #results {
+    animation: fadein 500ms ease-out forwards;
+    opacity: 0;
+}
+
 .benchmark {
     position: relative;
     flex: 1;
diff --git a/resources/jetstreams-static.svg b/resources/jetstreams-static.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2647" height="120" viewBox="0 0 2647 120">
+    <!-- Copyright © 2019 Apple Inc. All rights reserved. -->
+    <style>
+        .line {
+            mix-blend-mode: multiply;
+            stroke-dasharray: 2680;
+            stroke-dashoffset: 0;
+        }
+    </style>
+    <g fill="none" fill-rule="evenodd" opacity=".8" stroke-dasharray="2680" stroke-linecap="square" stroke="#B9EAFF" stroke-width="5">
+        <path class="line" d="M0.381287582,77.2851563 C45.5977594,100.205019 115.707877,111.66495 210.71164,111.66495 C353.217284,111.66495 433.15655,50.4282334 626.183452,50.4282334 C819.210355,50.4282334 1003.20257,83.2313059 1085.21867,84.6042334 C1167.23478,85.977161 1231.04683,71 1322.53193,71 C1414.01704,71 1405.89836,77.9769045 1469.70623,77.9769045 C1533.51411,77.9769045 1858.0854,41.1147334 1982.42221,41.1152334 C2106.759,41.1157334 2336.34112,96.9169334 2457.44102,96.9169334 C2538.17429,96.9169334 2612.48771,90.6035905 2680.38129,77.9769045"/>
+        <path class="line second" d="M0.381287582,77.2851563 C52.8221181,59.380541 115.923899,50.4282334 189.68663,50.4282334 C300.330726,50.4282334 463.775156,77.2851563 587.977497,77.2851563 C712.179836,77.2851563 841.854221,41.1162334 960.608924,41.1157334 C1079.36363,41.1152334 1175.54909,71 1267.0342,71 C1358.5193,71 1486.92586,84.8073502 1579.31596,84.8073502 C1671.70606,84.8073502 1951.64553,37.773825 2091.51218,38.3793587 C2231.37883,38.9848924 2309.70347,76.3864611 2465.75572,78.8007813 C2569.79056,80.410328 2641.3324,76.8419454 2680.38129,68.0956334"/>
+        <path class="line third" d="M0.381287582,68.0956334 C46.104713,82.5628758 116.468307,89.796497 211.472071,89.796497 C353.977713,89.796497 569.766201,41.1157334 695.40436,41.1157334 C821.042519,41.1157334 1029.874,71.5221545 1121.3591,71.5221545 C1212.84421,71.5221545 1231.04683,71 1322.53193,71 C1414.01704,71 1470.55153,86.8321594 1614.81651,89.796497 C1759.08149,92.7608346 1917.33862,49.8226997 2057.20527,50.4282334 C2197.07192,51.0337671 2372.16992,114.838073 2475.15354,114.838073 C2543.8093,114.838073 2612.21853,107.48016 2680.38129,92.7643334"/>
+        <path class="line fourth" d="M0.381287582,50.4282334 C39.5600335,20.8094111 105.603499,5.66666667 198.511683,5 C337.873959,4 411.779393,89.7993958 588.034245,89.7993958 C764.289095,89.7993958 886.574266,57.2387752 996.542944,57.2387752 C1106.51162,57.2387752 1231.16568,71 1322.65962,71 C1414.15356,71 1447.8544,56.1829752 1541.98759,57.2387752 C1636.12078,58.2945752 1817.26413,89.8073502 1971.66487,89.8073502 C2126.06561,89.8073502 2305.87367,16.3803334 2455.48134,17.3806334 C2555.2198,18.0475001 2629.51978,33.3807334 2678.38129,63.3803334"/>
+        <path class="line fifth" d="M0.381287582,50.4282334 C100.711815,28.2065001 198.37896,17.0956334 293.382723,17.0956334 C435.888367,17.0956334 531.07636,67.2833421 716.990501,71.5221545 C902.904641,75.7609669 1020.95162,46.3806334 1100.3489,46.3806334 C1179.74619,46.3806334 1250.52195,71 1342.00705,71 C1433.49216,71 1503.60201,41.3248334 1597.7261,42.3806334 C1691.8502,43.4364334 1891.84425,89.1938621 2031.7109,89.7993958 C2171.57755,90.4049295 2341.72526,52.2362334 2469.03608,52.2362334 C2553.90996,52.2362334 2624.35836,59.7595397 2680.38129,74.8061523"/>
+        <path class="line third" d="M0.381287582,63.3803334 C29.9004627,42.0463503 86.1138292,31.3793587 169.021387,31.3793587 C293.382723,31.3793587 530.433313,103.701906 703.857385,103.731049 C877.281458,103.760193 1001.04857,58.6844334 1102.10823,59.8364334 C1203.1679,60.9884334 1231.04683,71 1322.53193,71 C1414.01704,71 1625.37248,44.1157334 1733.57121,44.1157334 C1841.76995,44.1157334 1984.50341,75.8774804 2102.06815,76.3864611 C2219.6329,76.8954417 2348.05336,31.3793587 2475.36419,31.3793587 C2531.94676,31.3793587 2600.2858,43.232817 2680.38129,66.9397334"/>
+    </g>
+</svg>
