diff --git a/src/components/Grow.svelte b/src/components/Grow.svelte
new file mode 100644
index 00000000..08cc15d4
--- /dev/null
+++ 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
index 361d586e..4da33817 100644
--- a/src/components/Icons/CircleFour.svelte
+++ b/src/components/Icons/CircleFour.svelte
@@ -1,8 +1,10 @@
 <script>
-  let { width = '112', classes = '' } = $props();
+  import Grow from '$components/Grow.svelte';
+
+  let { width = '112' } = $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
@@ -10,4 +12,4 @@
       fill="white"
     />
   </svg>
-</div>
+</Grow>
diff --git a/src/components/Icons/CircleOne.svelte b/src/components/Icons/CircleOne.svelte
index 60ba42f2..8d320ff0 100644
--- a/src/components/Icons/CircleOne.svelte
+++ b/src/components/Icons/CircleOne.svelte
@@ -1,8 +1,9 @@
 <script>
-  let { width = '112', classes = '' } = $props();
+  let { width = '112' } = $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
@@ -10,4 +11,4 @@
       fill="white"
     />
   </svg>
-</div>
+</Grow>
diff --git a/src/components/Icons/CircleThree.svelte b/src/components/Icons/CircleThree.svelte
index eeeee255..cc9be3b3 100644
--- a/src/components/Icons/CircleThree.svelte
+++ b/src/components/Icons/CircleThree.svelte
@@ -1,8 +1,10 @@
 <script>
-  let { width = '112', classes = '' } = $props();
+  import Grow from '../Grow.svelte';
+
+  let { width = '112' } = $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
@@ -10,4 +12,4 @@
       fill="white"
     />
   </svg>
-</div>
+</Grow>
diff --git a/src/components/Icons/CircleTwo.svelte b/src/components/Icons/CircleTwo.svelte
index bfec0785..8e265248 100644
--- a/src/components/Icons/CircleTwo.svelte
+++ b/src/components/Icons/CircleTwo.svelte
@@ -1,8 +1,10 @@
 <script>
-  let { width = '112', classes = '' } = $props();
+  import Grow from '$components/Grow.svelte';
+
+  let { width = '112' } = $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
@@ -10,4 +12,4 @@
       fill="white"
     />
   </svg>
-</div>
+</Grow>
diff --git a/src/components/Sections/Ecosystem.svelte b/src/components/Sections/Ecosystem.svelte
index cdf4a5a1..404fcb1e 100644
--- 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>
@@ -22,9 +23,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 gap-f24 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 text-white md:mb-f32 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
@@ -42,7 +45,9 @@
     </section>
   </div>
   <section class="freq-container py-f56">
-    <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/SlideIn.svelte b/src/components/SlideIn.svelte
index 7c91b0f2..490289fd 100644
--- 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
index caff124f..fe0357e9 100644
--- 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;
   }