lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reverse undraw animation - mirror of draw sequence

Browse Source 
Changes:
- Fills disappear in reverse order (last-in, first-out)
- Strokes undraw using reverse dasharray animation
- Diagonals undraw with reverse 0.3s stagger
- Circle undraws slower (2s) like it drew
- Background still fades out smoothly after undraw completes

Animation now perfectly mirrors itself!

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-03 00:12:36 +00:00
parent 8b5b7297d3
commit 8f1db67c61
1 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/SplashIntro.vue
View File

@@ -279,17 +279,17 @@ onMounted(() => {
stroke-dasharray: 2000; stroke-dasharray: 2000;
stroke-dashoffset: 2000; stroke-dashoffset: 2000;
fill: transparent; fill: transparent;
animation: drawStroke 1.5s ease-out forwards; animation: drawStroke 1.5s ease-out forwards, undrawStroke 1.5s ease-in 3s forwards;
} }
/* Circle stroke draws slower */ /* Circle stroke draws slower */
.logo-circle { .logo-circle {
animation: drawStroke 2s ease-out forwards; animation: drawStroke 2s ease-out forwards, undrawStroke 2s ease-in 3s forwards;
} }
/* Diagonal strokes draw with slight delay */ /* Diagonal strokes draw with slight delay */
.logo-diagonal { .logo-diagonal {
animation: drawStroke 1.5s ease-out 0.3s forwards; animation: drawStroke 1.5s ease-out 0.3s forwards, undrawStroke 1.5s ease-in 2.7s forwards;
} }
@keyframes drawStroke { @keyframes drawStroke {
@@ -298,23 +298,32 @@ onMounted(() => {
} }
} }
@keyframes undrawStroke {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 2000;
}
}
/* Fill Appearance Animation - starts after strokes mostly drawn */ /* Fill Appearance Animation - starts after strokes mostly drawn */
.logo-fill { .logo-fill {
opacity: 0; opacity: 0;
animation: fillAppear 0.8s ease-out 1.2s forwards; animation: fillAppear 0.8s ease-out 1.2s forwards, fillDisappear 0.8s ease-in 3s forwards;
} }
/* Stagger fill animations slightly */ /* Stagger fill animations slightly for draw */
.logo-fill-1 { animation-delay: 1.2s; } .logo-fill-1 { animation-delay: 1.2s, 3.9s; }
.logo-fill-2 { animation-delay: 1.3s; } .logo-fill-2 { animation-delay: 1.3s, 3.8s; }
.logo-fill-3 { animation-delay: 1.4s; } .logo-fill-3 { animation-delay: 1.4s, 3.7s; }
.logo-fill-4 { animation-delay: 1.5s; } .logo-fill-4 { animation-delay: 1.5s, 3.6s; }
.logo-fill-5 { animation-delay: 1.6s; } .logo-fill-5 { animation-delay: 1.6s, 3.5s; }
.logo-fill-6 { animation-delay: 1.7s; } .logo-fill-6 { animation-delay: 1.7s, 3.4s; }
.logo-fill-7 { animation-delay: 1.8s; } .logo-fill-7 { animation-delay: 1.8s, 3.3s; }
.logo-fill-8 { animation-delay: 1.9s; } .logo-fill-8 { animation-delay: 1.9s, 3.2s; }
.logo-fill-9 { animation-delay: 2.0s; } .logo-fill-9 { animation-delay: 2.0s, 3.1s; }
.logo-fill-10 { animation-delay: 2.1s; } .logo-fill-10 { animation-delay: 2.1s, 3.0s; }
@keyframes fillAppear { @keyframes fillAppear {
to { to {
@@ -322,19 +331,12 @@ onMounted(() => {
} }
} }
/* Reverse Animation - Undraw everything */ @keyframes fillDisappear {
.splash-logo {
animation: undrawAll 1.5s ease-in 3s forwards;
}
@keyframes undrawAll {
from { from {
opacity: 1; opacity: 1;
transform: scale(1);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale(0.8);
} }
} }