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