fix slide in, add grow on numbers, and add slide in on all headers

frequency-chain · Nov 18, 2024 · 8d1be42 · 8d1be42
1 parent bd31214
commit 8d1be42
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 31 deletions.
diff --git a/src/components/Grow.svelte b/src/components/Grow.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import viewport from '$lib/util/useViewportAction';
+
+  let grow = '';
+</script>
+
+<div
+  class={`grow-out transition-all duration-1000 ${grow}`}
+  use:viewport
+  on:enterViewport={() => (grow = 'grow-in')}
+  on:exitViewport={() => (grow = '')}
+>
+  <slot />
+</div>
+
+<style>
+  .grow-out {
+    scale: 75%;
+    opacity: 0;
+  }
+
+  .grow-in {
+    scale: 100%;
+    opacity: 1;
+  }
+</style>
diff --git a/src/components/Icons/CircleFour.svelte b/src/components/Icons/CircleFour.svelte
@@ -1,13 +1,15 @@
 <script>
+  import Grow from '$components/Grow.svelte';
+
   let { width = '112', classes = '' } = $props();
 </script>
 
-<div class={classes}>
+<Grow>
   <svg {width} height="111" viewBox="0 0 112 111" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="56.25" cy="55.5" r="55.5" fill="#18465E" />
     <path
       d="M72.2754 62.7485C72.6904 62.7485 72.8979 62.9683 72.8979 63.4077V73.1855C72.8979 73.6006 72.6904 73.8081 72.2754 73.8081H69.9316C69.7363 73.8081 69.5776 73.8813 69.4556 74.0278C69.3335 74.1499 69.2725 74.2964 69.2725 74.4673V82.1943C69.2725 82.6094 69.0649 82.8169 68.6499 82.8169H56.5649C56.1499 82.8169 55.9424 82.5972 55.9424 82.1577L56.1621 74.4673C56.1621 74.0278 55.9546 73.8081 55.5396 73.8081H35.2881C34.873 73.8081 34.6655 73.6006 34.6655 73.1855V64.543C34.6655 64.4209 34.6777 64.3354 34.7021 64.2866L49.314 30.6318C49.436 30.3877 49.6313 30.2656 49.8999 30.2656H68.9429C69.3823 30.2656 69.6021 30.4731 69.6021 30.8882L69.2725 62.126C69.2725 62.541 69.4922 62.7485 69.9316 62.7485H72.2754ZM57.1875 61.8696L57.4438 44.7676C57.4438 44.4258 57.2729 44.2183 56.9312 44.145C56.6138 44.0474 56.3818 44.1572 56.2354 44.4746L48.6182 61.6133C48.5205 61.8086 48.5327 62.0039 48.6548 62.1992C48.7769 62.3945 48.96 62.4922 49.2041 62.4922H56.5649C56.7358 62.4922 56.8823 62.4312 57.0044 62.3091C57.1265 62.187 57.1875 62.0405 57.1875 61.8696Z"
       fill="white"
     />
   </svg>
-</div>
+</Grow>
diff --git a/src/components/Icons/CircleOne.svelte b/src/components/Icons/CircleOne.svelte
@@ -1,13 +1,14 @@
 <script>
   let { width = '112', classes = '' } = $props();
+  import Grow from '../Grow.svelte';
 </script>
 
-<div class={classes}>
+<Grow>
   <svg {width} height="111" viewBox="0 0 112 111" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="55.75" cy="55.5" r="55.5" fill="#18465E" />
     <path
       d="M62.5 30.2C62.8 30.2 63.1 30.5 63.1 30.875V82.1C63.1 82.475 62.8 82.775 62.5 82.775H50.425C50.05 82.775 49.75 82.475 49.75 82.1V42.95C49.75 42.575 49.45 42.35 49.075 42.35H41.5C41.125 42.35 40.825 41.975 40.9 41.6L41.8 30.8C41.875 30.5 42.175 30.2 42.475 30.2H62.5Z"
       fill="white"
     />
   </svg>
-</div>
+</Grow>
diff --git a/src/components/Icons/CircleThree.svelte b/src/components/Icons/CircleThree.svelte
@@ -1,13 +1,15 @@
 <script>
+  import Grow from '../Grow.svelte';
+
   let { width = '112', classes = '' } = $props();
 </script>
 
-<div class={classes}>
+<Grow>
   <svg {width} height="111" viewBox="0 0 112 111" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="56.25" cy="55.5" r="55.5" fill="#18465E" />
     <path
       d="M76.1797 65.7148V65.7515V65.8247C76.1797 67.021 76.082 68.0952 75.8867 69.0474C75.2031 72.4409 73.5796 75.4072 71.0161 77.9463C68.4771 80.4609 65.4131 82.1455 61.8242 83C60.2617 83.3662 58.6626 83.5493 57.0269 83.5493C55.3911 83.5493 53.7798 83.3662 52.1929 83C48.7749 82.1699 45.833 80.6074 43.3672 78.3125C40.9014 76.0176 39.2534 73.2832 38.4233 70.1094C38.3745 69.9385 38.2891 69.5845 38.167 69.0474C38.1426 68.9985 38.1182 68.9009 38.0938 68.7544C38.0938 68.6079 38.0938 68.498 38.0938 68.4248C38.0449 68.0586 38.2036 67.8267 38.5698 67.729L48.8237 65.0923C48.9946 65.0435 49.1533 65.0679 49.2998 65.1655C49.4707 65.2632 49.5684 65.3975 49.5928 65.5684C49.8857 66.6914 50.3496 67.6924 50.9844 68.5713C51.5459 69.6455 52.3394 70.5 53.3647 71.1348C54.4146 71.7695 55.562 72.0747 56.8071 72.0503C58.5161 72.0259 59.9932 71.4277 61.2383 70.2559C62.4834 69.0596 63.1548 67.6069 63.2524 65.8979C63.3501 64.0181 62.752 62.4067 61.458 61.064C60.1885 59.7212 58.626 59.0376 56.7705 59.0132H54.0605C53.6455 59.0132 53.438 58.7935 53.438 58.354L53.3647 51.0664C53.3647 50.627 53.5723 50.4072 53.9873 50.4072H56.6606C58.0767 50.4072 59.2974 49.8945 60.3228 48.8691C61.3481 47.8438 61.8608 46.6108 61.8608 45.1704C61.8608 43.6079 61.2749 42.3018 60.103 41.252C58.9312 40.2021 57.5518 39.7749 55.9648 39.9702C55.4521 40.019 54.8418 40.2266 54.1338 40.5928L53.8408 40.7393C53.4746 40.9834 53.1938 41.2031 52.9985 41.3984C52.5347 41.8379 52.1807 42.3384 51.9365 42.8999C51.5459 43.6323 51.2407 44.6577 51.021 45.9761C50.9722 46.1714 50.8623 46.3179 50.6914 46.4155C50.5449 46.5132 50.3862 46.5376 50.2153 46.4888L40.4741 43.9619C40.1079 43.8643 39.9492 43.6323 39.998 43.2661C40.1689 41.5815 40.584 40.0312 41.2432 38.6152C42.5615 35.8076 44.6489 33.5615 47.5054 31.877C50.3862 30.168 53.5601 29.3135 57.0269 29.3135C60.103 29.3135 62.9473 29.9849 65.5596 31.3276C68.1719 32.6704 70.2349 34.4893 71.7485 36.7842C73.2866 39.0791 74.0557 41.5815 74.0557 44.2915C74.0557 44.3647 74.0435 44.4746 74.019 44.6211C74.019 44.7676 74.019 44.8774 74.019 44.9507V45.1704C74.019 45.4146 74.0068 45.5977 73.9824 45.7197C73.9824 45.7686 73.9702 45.8296 73.9458 45.9028C73.9214 45.9761 73.9092 46.0249 73.9092 46.0493C73.9092 46.0737 73.897 46.1226 73.8726 46.1958C73.8726 46.269 73.8726 46.3179 73.8726 46.3423C73.5063 48.686 72.5298 50.8589 70.9429 52.8608C70.6987 53.1538 70.7231 53.4468 71.0161 53.7397L71.0894 53.813L71.3823 54.106L71.5654 54.2891C71.6143 54.3623 71.6875 54.4478 71.7852 54.5454C71.8828 54.6431 71.9561 54.7285 72.0049 54.8018C74.1777 57.3408 75.5083 60.2095 75.9966 63.4077C75.9966 63.4321 75.9966 63.481 75.9966 63.5542C76.021 63.6274 76.0332 63.6885 76.0332 63.7373C76.082 63.9326 76.1064 64.0669 76.1064 64.1401C76.1309 64.2866 76.1431 64.5063 76.1431 64.7993L76.1797 65.0557V65.1655V65.4219V65.6782V65.7148Z"
       fill="white"
     />
   </svg>
-</div>
+</Grow>
diff --git a/src/components/Icons/CircleTwo.svelte b/src/components/Icons/CircleTwo.svelte
@@ -1,13 +1,15 @@
 <script>
+  import Grow from '$components/Grow.svelte';
+
   let { width = '112', classes = '' } = $props();
 </script>
 
-<div class={classes}>
+<Grow>
   <svg {width} height="111" viewBox="0 0 112 111" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="55.75" cy="55.5" r="55.5" fill="#18465E" />
     <path
       d="M74.225 68.15C74.6 68.15 74.9 68.45 74.9 68.825V79.1C74.9 79.475 74.6 79.775 74.225 79.775H38.825C38.45 79.775 38.225 79.475 38.225 79.1V69.95C38.225 69.725 38.3 69.575 38.375 69.425L38.675 69.2C41.15 67.025 43.55 64.85 45.95 62.675C48.35 60.575 50.675 58.4 53.075 56.225L53.3 56.075C58.025 51.95 61.475 48.875 61.55 44C61.55 40.325 59.525 38.225 56 38.225C52.7 38.225 51.425 40.925 50.975 43.325C50.9 43.7 50.525 43.925 50.225 43.85L39.125 41.075C38.825 41 38.6 40.625 38.675 40.325C39.2 38.075 40.1 35.75 41.75 33.575C46.325 26.975 53.825 26.3 56.825 26.3C62.15 26.3 66.65 28.025 69.95 31.325C72.95 34.4 74.6 38.6 74.6 43.175C74.525 49.4 72.275 53.825 66.2 59.6C64.325 61.475 62.375 63.275 60.5 65.15C59.825 65.75 59.15 66.425 58.475 67.1C58.025 67.475 58.325 68.15 58.925 68.15H74.225Z"
       fill="white"
     />
   </svg>
-</div>
+</Grow>
diff --git a/src/components/Sections/Ecosystem.svelte b/src/components/Sections/Ecosystem.svelte
@@ -5,6 +5,7 @@
   import WavesTwo from '$lib/assets/waves-two.svg';
   import MeWeLogo from '$lib/assets/ecosystem/mewe.svg';
   import SoarLogo from '$lib/assets/ecosystem/soar.svg';
+  import SlideIn from '../SlideIn.svelte';
 
   const logoClasses = 'max-h-[120px] px-3 py-5 w-full sm:w-1/2 lg:w-1/4';
 </script>
@@ -19,9 +20,11 @@
   <div class="relative mt-[-100px] bg-navy pb-f64 md:pb-f120">
     <section class="freq-container flex items-center md:px-52">
       <div class="flex w-full flex-col lg:w-2/3">
-        <h1 class="title-70 relative z-10 font-title text-white">
-          Growing into a better <br class="hidden md:inline" />Future Together
-        </h1>
+        <SlideIn>
+          <h1 class="title-70 relative z-10 font-title text-white">
+            Growing into a better <br class="hidden md:inline" />Future Together
+          </h1>
+        </SlideIn>
         <p class="body my-6 text-white md:pr-20">
           Frequency is leading a new era of social networking, empowering businesses and apps to help users unlock the
           value of their data and connections. Chosen as the core infrastructure for Project Liberty’s “People’s Bid” to
@@ -39,7 +42,9 @@
     </section>
   </div>
   <section class="freq-container py-10">
-    <h1 class="title-70 mb-6 text-center font-title text-primary">Companies in the Frequency Ecosystem</h1>
+    <SlideIn>
+      <h1 class="title-70 mb-6 text-center font-title text-primary">Companies in the Frequency Ecosystem</h1>
+    </SlideIn>
     <div class="flex w-full flex-wrap justify-around p-2 md:p-6">
       <img class={logoClasses} alt="MeWe" src={MeWeLogo} />
       <img class={logoClasses} alt="Soar" src={SoarLogo} />

diff --git a/src/components/Sections/Users/UsersItem.svelte b/src/components/Sections/Users/UsersItem.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import SlideIn from '../../SlideIn.svelte';
+
   export let icon = '';
   export let iconAlt = '';
   export let title = '';

diff --git a/src/components/SlideIn.svelte b/src/components/SlideIn.svelte
@@ -5,10 +5,22 @@
 </script>
 
 <div
-  class={slide}
+  class={`slide-out transition-all duration-1000 ${slide}`}
   use:viewport
-  on:enterViewport={() => (slide = 'slide-from-right')}
+  on:enterViewport={() => (slide = 'slide-in')}
   on:exitViewport={() => (slide = '')}
 >
   <slot />
 </div>
+
+<style>
+  .slide-out {
+    opacity: 0;
+    transform: translateX(10%);
+  }
+
+  .slide-in {
+    opacity: 1;
+    transform: translateX(0%);
+  }
+</style>
diff --git a/src/style/app.css b/src/style/app.css
@@ -70,23 +70,6 @@
     @apply w-full;
   }
 
-  @keyframes slide-from-right {
-    0% {
-      opacity: 0;
-      transform: translateX(10%);
-      -webkit-transform: translateX(10%);
-    }
-    100% {
-      transform: translateX(0%);
-      opacity: 1;
-    }
-  }
-
-  .slide-from-right {
-    animation: slide-from-right 1s ease-out;
-    -webkit-animation: slide-from-right 1s ease-out;
-  }
-
   .scroll-target {
     scroll-margin-top: 90px;
   }