Merge pull request #21 from Revolution-Hacks/animation

add some animation!
Revolution-Hacks · Nov 7, 2024 · 4577a53 · 4577a53
2 parents 1541cc8 + 4f800db
commit 4577a53
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 8 deletions.
diff --git a/src/lib/images/doublearrow.svg b/src/lib/images/doublearrow.svg
diff --git a/src/lib/style.scss b/src/lib/style.scss
@@ -46,6 +46,10 @@ $size_lg: 64rem;
       box-shadow 100ms,
       transform 100ms,
       filter 100ms;
+
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
   }
 
   &:hover {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -135,6 +135,11 @@
       @media (min-width: style.$size_md) {
         --transform: translate(calc(50% - 8em), calc(50% - 2em));
       }
+      
+      @media (prefers-reduced-motion) {
+        animation: none;
+        transform: var(--transform);
+      }
     }
 
     .wall-top {
@@ -183,6 +188,8 @@
         width: 3em;
         height: 3em;
         align-self: center;
+        
+        stroke: rgb(var(--fg));
       }
 
       .header {

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -157,6 +157,10 @@
         background: no-repeat space url('$lib/images/train.svg') left/149em;
         animation: 30s linear infinite train;
         animation-delay: var(--animation-delay);
+        
+        @media (prefers-reduced-motion) {
+          display: none;
+        }
       }
 
       &.reverse::after {
@@ -172,10 +176,6 @@
           background-position-x: 550%;
         }
       }
-
-      @media (prefers-reduced-motion) {
-        display: none;
-      }
     }
 
     .gear {
@@ -226,6 +226,7 @@
 
       @media (prefers-reduced-motion) {
         animation: none;
+        transform: var(--transform);
       }
     }
   }
@@ -242,13 +243,62 @@
     padding: 8em 4em;
     margin: auto;
     gap: 1em;
+    
+    @keyframes logo-a {
+      0% {
+        stroke-dasharray: 0 100;
+      }
+      
+      20% {
+        stroke-dasharray: 100 100;
+      }
+      
+      100% {
+        stroke-dasharray: 100 100;
+      }
+    }
+    
+    @keyframes logo-b {
+      0% {
+        stroke-dasharray: 0 100;
+      }
+      
+      20% {
+        stroke-dasharray: 0 100;
+      }
+      
+      100% {
+        stroke-dasharray: 100 100;
+      }
+    }
 
     :global(.logo) {
       /* I'm not sure why this is needed. Maybe because it's another component */
       grid-area: 1 / 1 / 1 / 1;
       width: 3em;
       height: 3em;
       align-self: center;
+      
+      stroke: rgb(var(--fg));
+    }
+    
+    :global(.logo .a) {
+      stroke-dasharray: 0 100;
+      animation: 1s cubic-bezier(.05,.09,.23,1) logo-a forwards;
+      animation-delay: 200ms;
+    }
+    
+    :global(.logo .b) {
+      stroke-dasharray: 0 100;
+      animation: 1s cubic-bezier(.05,.09,.23,1) logo-b forwards;
+      animation-delay: 200ms;
+    }
+    
+    @media (prefers-reduced-motion) {
+      :global(.logo .a), :global(.logo .b) {
+        animation: none;
+        stroke-dasharray: 100 100;
+      }
     }
 
     .header {