diff --git a/app/(events)/events/[...filename]/page.tsx b/app/(events)/events/[...filename]/page.tsx
index ee73ff94c3..406e4287a0 100644
--- a/app/(events)/events/[...filename]/page.tsx
+++ b/app/(events)/events/[...filename]/page.tsx
@@ -6,7 +6,6 @@ import { getSEOProps } from "@/lib/seo";
 import { EVENTS_MAX_SIZE_OVERRIDE } from "@/services/server/getEvents";
 import { fetchTinaData, FileType } from "@/services/tina/fetchTinaData";
 import client from "@/tina/client";
-import "aos/dist/aos.css"; // This is important to keep the animation
 import { Metadata } from "next";
 import { cache } from "react";
 import EventsPage from "./events";
diff --git a/app/consulting/[filename]/page.tsx b/app/consulting/[filename]/page.tsx
index 0ed0b91cb9..90f7b7fa79 100644
--- a/app/consulting/[filename]/page.tsx
+++ b/app/consulting/[filename]/page.tsx
@@ -2,7 +2,6 @@ import { TinaClient } from "@/app/tina-client";
 import { getSEOProps } from "@/lib/seo";
 import { fetchTinaData, FileType } from "@/services/tina/fetchTinaData";
 import client from "@/tina/client";
-import "aos/dist/aos.css"; // This is important to keep the animation
 import { Metadata } from "next";
 import { cache } from "react";
 
diff --git a/app/consulting/video-production/[filename]/page.tsx b/app/consulting/video-production/[filename]/page.tsx
index 35c89d5d6c..6c38b2765c 100644
--- a/app/consulting/video-production/[filename]/page.tsx
+++ b/app/consulting/video-production/[filename]/page.tsx
@@ -3,7 +3,6 @@ import ClientFallback from "@/components/client-fallback";
 import { getSEOProps } from "@/lib/seo";
 import { fetchTinaData } from "@/services/tina/fetchTinaData";
 import client from "@/tina/client";
-import "aos/dist/aos.css"; // This is important to keep the animation
 import { Metadata } from "next";
 import VideoProduction from "./video-production";
 
diff --git a/app/tina-client.tsx b/app/tina-client.tsx
index d7a867a64a..5f78ab649d 100644
--- a/app/tina-client.tsx
+++ b/app/tina-client.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import AOS from "aos";
-import { useEffect } from "react";
 import { useTina } from "tinacms/dist/react";
 export type UseTinaProps = {
   query: string;
@@ -21,22 +19,5 @@ export function TinaClient<T>({ props, Component }: TinaClientProps<T>) {
     data: props.data,
   });
 
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      AOS.init({
-        duration: 1200,
-        once: true,
-      });
-
-      AOS.refresh();
-    }
-
-    return () => {
-      if (typeof window !== "undefined") {
-        AOS.refreshHard();
-      }
-    };
-  }, []);
-
   return <Component tinaProps={{ data }} props={{ ...props }} />;
 }
diff --git a/components/blocks/imageComponents/ImageComponentLayout.tsx b/components/blocks/imageComponents/ImageComponentLayout.tsx
index 1f6641e99a..0d244fa486 100644
--- a/components/blocks/imageComponents/ImageComponentLayout.tsx
+++ b/components/blocks/imageComponents/ImageComponentLayout.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { Container } from "@/components/util/container";
 import { VideoModal } from "@/components/videoModal";
-import "aos/dist/aos.css";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { tinaField } from "tinacms/dist/react";
diff --git a/components/blocks/imageComponents/accordionBlock/accordionBlock.tsx b/components/blocks/imageComponents/accordionBlock/accordionBlock.tsx
index 2b4f9f766b..10b546782d 100644
--- a/components/blocks/imageComponents/accordionBlock/accordionBlock.tsx
+++ b/components/blocks/imageComponents/accordionBlock/accordionBlock.tsx
@@ -8,7 +8,6 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { cn } from "@/lib/utils";
-import "aos/dist/aos.css";
 import classNames from "classnames";
 import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
diff --git a/components/blocks/imageComponents/imageTextBlock/imageTextBlock.tsx b/components/blocks/imageComponents/imageTextBlock/imageTextBlock.tsx
index 347142e611..dca08faf0f 100644
--- a/components/blocks/imageComponents/imageTextBlock/imageTextBlock.tsx
+++ b/components/blocks/imageComponents/imageTextBlock/imageTextBlock.tsx
@@ -2,7 +2,6 @@
 import AlternatingText from "@/components/alternating-text";
 import ButtonRow from "@/components/blocksSubtemplates/buttonRow";
 import { cn } from "@/lib/utils";
-import "aos/dist/aos.css";
 import classNames from "classnames";
 import React from "react";
 import { tinaField } from "tinacms/dist/react";
diff --git a/components/blocks/testimonialsCard.tsx b/components/blocks/testimonialsCard.tsx
index 81fd45d101..f02b3e6f72 100644
--- a/components/blocks/testimonialsCard.tsx
+++ b/components/blocks/testimonialsCard.tsx
@@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
 import { useState } from "react";
 import { TestimonialType } from "../../helpers/getTestimonials";
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 
 const Image = dynamic(() => import("next/image"));
 
@@ -23,6 +24,7 @@ export const TestimonialCard = ({ testimonial }: TestimonialCardProps) => {
       data-aos="flip-right"
       key={testimonial?.name}
     >
+      <AosLoader />
       <div className="flex flex-col items-center">
         <Image
           alt={`Avatar of ${testimonial?.name}`}
diff --git a/components/blocks/youtubePlaylist.tsx b/components/blocks/youtubePlaylist.tsx
index 669eb122b2..8e55582574 100644
--- a/components/blocks/youtubePlaylist.tsx
+++ b/components/blocks/youtubePlaylist.tsx
@@ -6,6 +6,7 @@ import { BsArrowRightCircle } from "react-icons/bs";
 import { tinaField } from "tinacms/dist/react";
 import { VideoLink } from "../../services/server/youtube";
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 import { VideoCard } from "../util/videoCards";
 
 export type YoutubePlaylistProps = {
@@ -71,6 +72,7 @@ export const YoutubePlaylistBlock: React.FC<YoutubePlaylistProps> = (props) => {
             data-aos={playlistButton.animated ? "fade-up" : undefined}
             data-tina-field={tinaField(props.playlistButton, "text")}
           >
+            {playlistButton.animated && <AosLoader />}
             {playlistButton.text}
             <BsArrowRightCircle className="ml-1 inline" />
           </CustomLink>
diff --git a/components/button/utilityButton.tsx b/components/button/utilityButton.tsx
index 70ddd7f6a8..9f23f43c91 100644
--- a/components/button/utilityButton.tsx
+++ b/components/button/utilityButton.tsx
@@ -5,6 +5,7 @@ import { JSX } from "react";
 import { BsArrowLeftCircle, BsArrowRightCircle } from "react-icons/bs";
 import type { Template } from "tinacms";
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 import Button from "./rippleButton";
 
 const sizes = {
@@ -64,6 +65,7 @@ export const UtilityButton = ({
       onClick={() => !disabled && onClick()}
       data-aos={animated ? "fade-up" : undefined}
     >
+      {animated && <AosLoader />}
       {buttonText}
       {btnIcon && iconMapper(btnIcon)}
     </Button>
diff --git a/components/consulting/mediaCard/mediaCard.tsx b/components/consulting/mediaCard/mediaCard.tsx
index 605626408d..b2c9544968 100644
--- a/components/consulting/mediaCard/mediaCard.tsx
+++ b/components/consulting/mediaCard/mediaCard.tsx
@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { FC } from "react";
 import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
+import AosLoader from "../../util/aosLoader";
 
 export type MediaCardProps = {
   type: "video" | "blog";
@@ -22,6 +23,7 @@ const MediaCard: FC<MediaCardProps> = ({ type, content }) => {
         bgImagesClasses[type]
       )}
     >
+      <AosLoader />
       <TinaMarkdown content={content} />
     </div>
   );
diff --git a/components/liveStream/liveStreamWidget.tsx b/components/liveStream/liveStreamWidget.tsx
index 0759b1f313..fec5c5da20 100644
--- a/components/liveStream/liveStreamWidget.tsx
+++ b/components/liveStream/liveStreamWidget.tsx
@@ -17,6 +17,7 @@ import layoutData, {
 import { LiveStreamProps } from "../../hooks/useLiveStreamProps";
 import { VideoEmbed } from "../blocks/videoEmbed";
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 import { InlineJotForm } from "../inlineJotForm/inlineJotForm";
 import { SocialIcons } from "../socialIcons/socialIcons";
 
@@ -147,6 +148,7 @@ export const LiveStreamWidget = ({ isLive, event }: LiveStreamWidgetProps) => {
             data-aos-anchor="#thumbnailAnchor"
             data-aos-anchor-placement="bottom-top"
           >
+            <AosLoader />
             <VideoEmbed
               data={{
                 url: youtubeUrls.videoUrl,
diff --git a/components/technologyCard/technologyCard.tsx b/components/technologyCard/technologyCard.tsx
index 20547aebac..0cdcbe759e 100644
--- a/components/technologyCard/technologyCard.tsx
+++ b/components/technologyCard/technologyCard.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 import { TechnologyCardProps } from "./technologyCardTypes";
 
 const Image = dynamic(() => import("next/image"));
@@ -14,6 +15,7 @@ const TechnologyCard: FC<TechnologyCardProps> = (props) => {
       className="mx-3.5 mb-15 mt-5 flex h-full flex-col border-b-2 border-solid border-sswRed bg-gray-75 px-8 py-11"
       data-aos="flip-left"
     >
+      <AosLoader />
       {thumbnail ? (
         <figure
           className="relative h-24 px-8"
diff --git a/components/training/presenterBlock.tsx b/components/training/presenterBlock.tsx
index 0e2f978c21..fc4f30a597 100644
--- a/components/training/presenterBlock.tsx
+++ b/components/training/presenterBlock.tsx
@@ -4,11 +4,13 @@ import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { presenterSchemaConstants } from "../../tina/collections/presenter"; // TODO: Use alias - https://github.com/tinacms/tinacms/issues/4488
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 import { Container } from "../util/container";
 
 export const PresenterBlock = ({ data }) => {
   return (
     <Container size="custom">
+      <AosLoader />
       <h2
         className="mb-12 text-center"
         data-tina-field={tinaField(data, presenterBlockConstant.header)}
diff --git a/components/util/aosLoader.tsx b/components/util/aosLoader.tsx
new file mode 100644
index 0000000000..9a2fdf551c
--- /dev/null
+++ b/components/util/aosLoader.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import "aos/dist/aos.css";
+import { useEffect } from "react";
+
+// Loads and initialises AOS only where a component actually renders data-aos
+// elements, instead of on every page. Renders nothing.
+let initialised = false;
+
+export const AosLoader = () => {
+  useEffect(() => {
+    let cancelled = false;
+
+    void import("aos").then((mod) => {
+      if (cancelled) return;
+      const AOS = mod.default;
+      if (!initialised) {
+        AOS.init({ duration: 1200, once: true });
+        initialised = true;
+      }
+      AOS.refresh();
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return null;
+};
+
+export default AosLoader;
diff --git a/components/util/consulting/benefits.tsx b/components/util/consulting/benefits.tsx
index fab2831fb8..72d24cc9f1 100644
--- a/components/util/consulting/benefits.tsx
+++ b/components/util/consulting/benefits.tsx
@@ -3,6 +3,7 @@ import dynamic from "next/dynamic";
 import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { CustomLink } from "../../customLink";
+import AosLoader from "../aosLoader";
 
 const Image = dynamic(() => import("next/image"));
 
@@ -68,6 +69,7 @@ export const Benefits = ({ data }) => {
 
   return (
     <article>
+      <AosLoader />
       <section className="grid sm:grid-cols-1 md:grid-cols-2">
         {benefitList?.map((benefit, index) => {
           return (
diff --git a/components/util/videoCards.tsx b/components/util/videoCards.tsx
index b04e9e6250..745207dd60 100644
--- a/components/util/videoCards.tsx
+++ b/components/util/videoCards.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import { FC } from "react";
 import Button from "../button/rippleButton";
 import { VideoModal } from "../videoModal";
+import AosLoader from "./aosLoader";
 import { Container } from "./container";
 import { Section } from "./section";
 
@@ -110,6 +111,7 @@ const VideoCards = ({
               window.open(channelLink || defaultChannelLink, "_blank")
             }
           >
+            <AosLoader />
             <span className="px-7">Watch More Videos</span>
           </Button>
         </div>