george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-05 17:33:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add staggered page load animations

Browse Source 
Implement elegant fadeInUp animations with staggered delays for main page
elements to create a polished, progressive reveal effect on page load.

Changes:
- layout.css: Added fadeInUp keyframes and delay utility classes
  (200ms, 400ms, 600ms, 800ms)
- +page.svelte: Applied animations to title, date, verse display,
  search input, guesses table, and credits

Animation sequence:
1. Title (0ms)
2. Date + Verse Display (200ms)
3. Search Input (400ms)
4. Guesses Table (600ms)
5. Credits (800ms - when won)

Creates a smooth, professional page load experience without changing any
existing design or functionality.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
George Powell
2026-02-11 17:07:03 -05:00
parent 730b65201a
commit df8a9e62bb
2 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/routes/+page.svelte
View File

@@ -456,22 +456,26 @@
<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
<div class="w-full max-w-3xl mx-auto px-4">
<h1
class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4"
class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4 animate-fade-in-up"
>
<TitleAnimation />
<div class="font-normal"></div>
</h1>
<div class="text-center mb-8">
<div class="text-center mb-8 animate-fade-in-up animate-delay-200">
<span class="big-text"
>{isDev ? "Dev Edition | " : ""}{currentDate}</span
>
</div>
<div class="flex flex-col gap-6">
<VerseDisplay {data} {isWon} {blurChapter} />
<div class="animate-fade-in-up animate-delay-200">
<VerseDisplay {data} {isWon} {blurChapter} />
</div>
{#if !isWon}
<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
<div class="animate-fade-in-up animate-delay-400">
<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
</div>
{:else}
<WinScreen
{grade}
@@ -501,10 +505,14 @@
/>
{/if}
<GuessesTable {guesses} {correctBookId} />
<div class="animate-fade-in-up animate-delay-600">
<GuessesTable {guesses} {correctBookId} />
</div>
{#if isWon}
<Credits />
<div class="animate-fade-in-up animate-delay-800">
<Credits />
</div>
{/if}
</div>
<div class="mt-8 flex flex-col items-stretch md:items-center gap-3">

32
src/routes/layout.css
View File

@@ -16,4 +16,36 @@ html, body {
letter-spacing: 0.2em;
color: rgb(107 114 128);
font-weight: 700;
}
/* Page load animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out both;
}
.animate-delay-200 {
animation-delay: 0.2s;
}
.animate-delay-400 {
animation-delay: 0.4s;
}
.animate-delay-600 {
animation-delay: 0.6s;
}
.animate-delay-800 {
animation-delay: 0.8s;
}