Skip to content

Skip startup animations with startDelay #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
camillobruni wants to merge 23 commits into
base: main
Choose a base branch
from
Open

Skip startup animations with startDelay #200

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
0c06efe
remove startup animation
camillobruni Oct 14, 2025
54dc3c7
back to rain
camillobruni Oct 15, 2025
d4f1b08
Merge branch 'main' into 2025-10-14_simpler_startup
camillobruni Oct 22, 2025
4d42ec9
Merge branch 'main' into 2025-10-14_simpler_startup
camillobruni Oct 22, 2025
3626407
Merge branch 'main' of github.com:camillobruni/JetStream into 2025-10…
camillobruni Oct 22, 2025
d362da1
revert
camillobruni Oct 22, 2025
e2c1870
enable animation without startDelay
camillobruni Oct 22, 2025
b578b11
rename
camillobruni Oct 22, 2025
74ccb99
Merge branch 'main' into 2025-10-14_simpler_startup
camillobruni Oct 22, 2025
3c52814
Merge branch 'main' into 2025-10-14_simpler_startup
camillobruni Oct 22, 2025
e0971d1
refactor
camillobruni Oct 23, 2025
86d95d1
update
camillobruni Oct 23, 2025
b074b9d
remove debug timeout
camillobruni Oct 23, 2025
cea65b8
Merge branch 'main' into 2025-10-14_simpler_startup
camillobruni Oct 23, 2025
33bdf3a
Merge branch 'main' into 2025-10-14_simpler_startup
camillobruni Oct 23, 2025
8cd220e
Merge branch 'main' into 2025-10-14_simpler_startup
camillobruni Oct 27, 2025
b241611
wip
camillobruni Oct 27, 2025
8b2846b
faster animation
camillobruni Oct 27, 2025
db30420
fix
camillobruni Oct 27, 2025
591842d
Merge branch 'main' into 2025-10-14_simpler_startup
camillobruni Oct 30, 2025
81df890
update css
camillobruni Oct 30, 2025
84102c1
more css cleanup
camillobruni Oct 30, 2025
79e418d
Merge branch 'main' into 2025-10-14_simpler_startup
camillobruni Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 29 additions & 11 deletions JetStream.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ body {
background-position: center -5vw;
background-size: 100vw;
padding-bottom: 0px;
background-image: url('clouds.svg');
background-image: url('img/clouds.svg');
padding-bottom: 0px;
overflow-y: hidden;
height: 100%;
}
Expand Down Expand Up @@ -115,15 +116,23 @@ img {
box-sizing: border-box;
background-repeat: no-repeat;
background-position: center;
background-image: url('JetStream3Logo.svg');
background-image: url('img/JetStream3Logo.svg');
color: transparent;
height: 75px;
}

.loading.animate .logo .logo-image {
animation: swingin 350ms ease-out forwards;
will-change: transform, opacity;
height: 75px;
animation-delay: 50ms;
}

.ready .logo .logo-image {
animation: none;
opacity: 1;
}

#jetstreams {
background-image: url('jetstreams.svg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
Expand All @@ -136,6 +145,14 @@ img {
max-height: 120px;
}

.loading.animate #jetstreams {
background-image: url("img/jetstreams.svg");
}

.loading #jetstreams, .ready #jetstreams {
background-image: url("img/jetstreams-static.svg");
}

#magic {
position: absolute;
top: -900px;
Expand All @@ -157,7 +174,13 @@ article,
.summary {
max-width: 70rem;
margin: 0 auto 0 auto;
}

.loading.animate .summary {
opacity: 0;
}

article, .loading.animate .summary {
animation: fadein 0.5s ease-in-out forwards;
animation-delay: 200ms;
}
Expand Down Expand Up @@ -244,17 +267,12 @@ a.button {
user-select: none;
}

a.button {
animation: fadein 500ms ease-in forwards, scaledown 500ms ease-in forwards;
opacity: 0;
}

#status label,
.button:hover {
background-image: none;
}

#status.loading {
.loading #status{
position: absolute;
top: 0;
left: 0;
Expand All @@ -273,7 +291,7 @@ a.button {
user-select: none;
}

#status.error {
.error #status {
max-width: 70rem;
margin: 0 auto 1rem;
}
Expand Down
18 changes: 8 additions & 10 deletions JetStreamDriver.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,6 @@ class Driver {
}
summaryHtml += "</div>";
const summaryElement = document.getElementById("result-summary");
summaryElement.classList.add("done");
summaryElement.innerHTML = summaryHtml;
summaryElement.onclick = displayCategoryScores;
statusElement.innerHTML = "";
Expand Down Expand Up @@ -370,6 +369,14 @@ class Driver {
if (e.key === "Enter")
JetStream.start();
});

const statusElement = document.getElementById("status");
statusElement.innerHTML = `<a href="javascript:JetStream.start()" class="button">Start Test</a>`;
statusElement.addEventListener("click", (e) => {
e.preventDefault();
JetStream.start();
return false;
}, { once: true});
}

reportError(benchmark, error) {
Expand Down Expand Up @@ -445,15 +452,6 @@ class Driver {
}

JetStream.loadCache = { }; // Done preloading all the files.

const statusElement = document.getElementById("status");
statusElement.classList.remove('loading');
statusElement.innerHTML = `<a href="javascript:JetStream.start()" class="button">Start Test</a>`;
statusElement.onclick = () => {
statusElement.onclick = null;
JetStream.start();
return false;
}
}

resultsObject(format = "run-benchmark") {
Expand Down
0 JetStream3Logo.svg → img/JetStream3Logo.svg
View file
Open in desktop
File renamed without changes
0 clouds.svg → img/clouds.svg
View file
Open in desktop
File renamed without changes
18 changes: 18 additions & 0 deletions img/jetstreams-static.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 jetstreams.svg → img/jetstreams.svg
View file
Open in desktop
File renamed without changes
16 changes: 12 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,28 +49,36 @@
}

async function initialize() {
const bodyClassList = document.body.classList;
if (JetStreamParams.startDelay !== undefined) {
bodyClassList.remove("animate");
}
Comment on lines 54 to 58
Copy link
Contributor

@kmiller68 kmiller68 Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I was thinking you'd do this logic before any animation starts in a new script tag between <script src="params.js"></script> and <script src="JetStreamDriver.js"></script> You'll have to use document.documentElement.classList but I think it should work. At least it seems to locally, modulo other CSS bugs I think happen because I removed the other classList changes.

Copy link
Contributor Author

@camillobruni camillobruni Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've first tried to conditionally start the animation – but then I figured that this wouldn't really solve anything when running with our automation. We pause after setting up the page to inject things, thus we can't really use startDelay anyway since it's not fully clear how long the injection-phase lasts.

Copy link
Contributor

@kmiller68 kmiller68 Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would something like an animations=true/false parameter work? My main concern is that the animations are clipped right now if the tests load in < 1s or so, which looks a little janky.

Copy link
Contributor Author

@camillobruni camillobruni Oct 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • I've now added an explicit await this.waitForBrowserUIStartupAnimation()
  • Added a soft transition from the animated jetstreams to the static one

if (globalThis.allIsGood) {
try {
await JetStream.initialize();
document.body.classList.add("ready");
} catch (e) {
globalThis.allIsGood = false;
console.error(e);
} finally {
bodyClassList.remove("loading");
bodyClassList.remove("animate-loading");
}
}
if (!globalThis.allIsGood) {
bodyClassList.add('error');
let statusElement = document.getElementById("status");
statusElement.classList.remove('loading');
statusElement.classList.add('error');
statusElement.innerHTML = "<h2>ERROR</h2><p>Errors were encountered during page load. Refusing to run a partial benchmark suite.</p>";
}
}

</script>

<script src="params.js"></script>
<script src="JetStreamDriver.js"></script>

</head>
<body onload="initialize()">
<body onload="initialize()" class="loading animate">
<h1 class="logo">
<div id="jetstreams">
<a href="index.html" class="logo-image">JetStream 3</a>
Expand All @@ -82,7 +90,7 @@ <h1 class="logo">
<p class="summary" id="mode-description"></p>

<div id="result-summary"></div>
<div id="status" class="loading">Loading Benchmark...</div>
<div id="status">Loading Benchmark...</div>

<div id="results"></div>
</main>
Expand Down
Loading