jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Organize animations

Browse source
This commit is contained in:
Justin Edmund 2025-05-26 18:26:40 -07:00
parent b1efb730a1
commit 1f1d7551fb
2 changed files with 79 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/assets/styles/animations.scss Normal file
View file

@ -0,0 +1,75 @@
/* Navigation Icon Animations
* -------------------------------------------------------------------------- */
// Work icon - cursor wiggle
@keyframes cursorWiggle {
0%, 100% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(-8deg) scale(1.05); }
75% { transform: rotate(8deg) scale(1.05); }
}
// Photos icon - masonry height changes
@keyframes masonryRect1 {
0%, 100% {
height: 10px;
y: 2px;
}
50% {
height: 6px;
y: 2px;
}
}
@keyframes masonryRect2 {
0%, 100% {
height: 6px;
y: 2px;
}
50% {
height: 10px;
y: 2px;
}
}
@keyframes masonryRect3 {
0%, 100% {
height: 4px;
y: 14px;
}
50% {
height: 8px;
y: 10px;
}
}
@keyframes masonryRect4 {
0%, 100% {
height: 8px;
y: 10px;
}
50% {
height: 4px;
y: 14px;
}
}
// Labs icon - test tube rotation
@keyframes tubeRotate {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
75% { transform: rotate(10deg); }
}
// Universe icon - star spin
@keyframes starSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(720deg); }
}
// Placeholder animations (not currently used)
@keyframes photoMasonry {
0%, 100% { transform: scale(1); }
25% { transform: scale(1); }
50% { transform: scale(1); }
75% { transform: scale(1); }
}

79
src/lib/components/SegmentedController.svelte
View file

@ -112,6 +112,8 @@
</nav> </nav>
<style lang="scss"> <style lang="scss">
@import '../../assets/styles/animations';
.segmented-controller { .segmented-controller {
display: flex; display: flex;
align-items: center; align-items: center;
@ -176,7 +178,8 @@
// Third item is Labs (index 3) // Third item is Labs (index 3)
.nav-item:nth-of-type(3) :global(svg.animate) { .nav-item:nth-of-type(3) :global(svg.animate) {
animation: tubeBubble 0.6s ease; animation: tubeRotate 0.6s ease;
transform-origin: center bottom;
} }
// Fourth item is Universe (index 4) // Fourth item is Universe (index 4)
@ -184,27 +187,6 @@
animation: starSpin 0.6s ease; animation: starSpin 0.6s ease;
} }
@keyframes cursorWiggle {
0%, 100% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(-8deg) scale(1.05); }
75% { transform: rotate(8deg) scale(1.05); }
}
@keyframes photoMasonry {
0%, 100% {
transform: scale(1);
}
25% {
transform: scale(1);
}
50% {
transform: scale(1);
}
75% {
transform: scale(1);
}
}
// Specific animation for photo masonry rectangles // Specific animation for photo masonry rectangles
.nav-item:nth-of-type(2) :global(svg.animate rect:nth-child(1)) { .nav-item:nth-of-type(2) :global(svg.animate rect:nth-child(1)) {
animation: masonryRect1 0.6s ease; animation: masonryRect1 0.6s ease;
@ -222,57 +204,4 @@
animation: masonryRect4 0.6s ease; animation: masonryRect4 0.6s ease;
} }
@keyframes masonryRect1 {
0%, 100% {
height: 10px;
y: 2px;
}
50% {
height: 6px;
y: 2px;
}
}
@keyframes masonryRect2 {
0%, 100% {
height: 6px;
y: 2px;
}
50% {
height: 10px;
y: 2px;
}
}
@keyframes masonryRect3 {
0%, 100% {
height: 4px;
y: 14px;
}
50% {
height: 8px;
y: 10px;
}
}
@keyframes masonryRect4 {
0%, 100% {
height: 8px;
y: 10px;
}
50% {
height: 4px;
y: 14px;
}
}
@keyframes tubeBubble {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-2px) scale(1.1); }
}
@keyframes starSpin {
0%, 100% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(45deg) scale(1.1); }
}
</style> </style>