.boot-up - Welcome screen

Any HTML or JSX with .boot-up anywhere in the DOM becomes the welcome screen. On hard reload only, the engine pauses all DOM rendering except .boot-up and its children for bootTime, then removes the boot screen and boots the main animations. SPA path changes skip the boot.

Basic usage

html

<div class="boot-up boot-time-2 boot-end-spawn-blur">
  <h1 class="spawn-up">GClass</h1>
  <p class="spawn-blur">Loading...</p>
</div>

<script type="module">
  import { initAnimations } from 'gclass-anims'
  initAnimations() // finds .boot-up anywhere, pauses 2s, then removes
</script>

// React / Next.js (JSX)
import { useEffect } from 'react'
import { initAnimations } from 'gclass-anims'

export default function App(){
  useEffect(()=>{ initAnimations() },[])
  return <div className="boot-up boot-time-2 boot-end-spawn-blur">...</div>
}

Tuneables

.boot-upAny element with this class is the boot screen. Can be anywhere. Only one per page - multiple logs console.error and skips boot.

boot-time-NDuration in seconds to show boot screen. Overwrites Config.js:74 defaults.bootTime (default 5). e.g. boot-time-2, boot-time-0.5. Max wins.

boot-end-<name>Exit animation in reverse before removing. <name> is a spawn sel without dot, e.g. boot-end-spawn-blur, boot-end-spawn-up. Plays from state via gsap.to. Skipped if absent.

boot-end-time-NDuration for the exit animation only. Falls back to boot-time-N or defaults.effectDuration.

ease-*Easing for the exit animation, e.g. ease-power3. Falls back to defaults.ease.

Behaviour

No .boot-up: boot completely skipped, initListeners() runs immediately (AnimToggle.js:146).

Single .boot-up: injects html.gclass-booting{visibility:hidden} .boot-up{visibility:visible;position:fixed;inset:0;z-index:9999} so only boot and children are visible, init is scoped to initListeners(bootEl) (AnimToggle.js:162 via Listeners.js:96 qAll), so spawn/loop/text inside boot still play. After bootTime, plays boot-end reverse if present, then hides boot (display:none + data-gclass-boot-hidden, React-safe) and boots main DOM.

Multiple .boot-up: console.error and all boot screens hidden immediately, boot skipped (AnimToggle.js:143).

Hard reload only: hasBooted flag in AnimToggle.js:119 stays true after first boot; SPA path changes re-calling initAnimations() find the hidden boot (filtered by data-gclass-boot-hidden) and skip. Hard reload resets JS and shows boot again. StrictMode double-mount during boot is ignored via bootTimeout guard.

Config

import { defaults } from 'gclass-anims'
defaults.bootTime = 5 // seconds, overwritten by boot-time-N
defaults.effectDuration = 1 // fallback for boot-end duration

Examples

html

<!-- 2s boot, exit with spawn-blur reverse -->
<div class="boot-up boot-time-2 boot-end-spawn-blur">
  <p class="typewriter">[  OK  ] Starting...</p>
</div>

<!-- No exit animation - just pause then hide -->
<div class="boot-up boot-time-2">Loading...</div>

<!-- Outside boot, normal animations (delayed until boot done) -->
<div class="spawn-up">reveals after boot</div>

Animations inside .boot-up are fully playable - use any Config.js:77 spawn/loop classes (spawn-up, spawn-blur, float etc). They run via scoped initListeners while main DOM is hidden.