AnimationsAdded

Author: FirePheonix

src/pages/TryNow/BootableSoas.tsx

@@ -1,6 +1,8 @@
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
 import FeatureSection from '@/components/TryNow/FeatureSection';
+import { motion } from 'framer-motion';
+import { zoomFadeInAnimation } from '@/styles/Animations';
 import {
   bootableSoasData,
   mockupImage,
@@ -14,7 +16,14 @@ const BootableSoasPage = () => {
       <main className="container mx-auto px-4 sm:px-6 md:px-8 py-6">
         <FeatureSection data={bootableSoasData} />
 
-        <img src={mockupImage.path} alt="TurtleMockup" />
+        <motion.img
+          src={mockupImage.path}
+          alt="BootableSoasMockup"
+          variants={zoomFadeInAnimation}
+          initial="initial"
+          animate="animate"
+          className="w-[80%] mx-auto"
+        />
 
         <StepsToUse />
       </main>

src/pages/TryNow/MusicBlocks.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import { fadeInUpAnimation } from '@/styles/Animations.ts';
+import { fadeInUpAnimation, zoomFadeInAnimation } from '@/styles/Animations.ts';
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
 import FeatureSection from '@/components/TryNow/FeatureSection';
@@ -82,7 +82,14 @@ const MusicBlocksPage = () => {
         </div>
 
         <div className="w-[80%] mx-auto flex justify-center">
-          <img src={mockupImage.path} alt="TurtleMockup" />
+          <motion.img
+            src={mockupImage.path}
+            alt="MusicBlocksMockup"
+            variants={zoomFadeInAnimation}
+            initial="initial"
+            animate="animate"
+            className="w-[80%] mx-auto"
+          />
         </div>
 
         <p className="w-[80%] mx-auto flex justify-center">

src/pages/TryNow/Sugarizer.tsx

@@ -3,7 +3,7 @@ import Footer from '@/sections/Footer';
 import FeatureSection from '@/components/TryNow/FeatureSection';
 import LogoCards from '@/components/TryNow/LogoCards';
 import { motion } from 'framer-motion';
-import { fadeInUpAnimation } from '@/styles/Animations.ts';
+import { fadeInUpAnimation, zoomFadeInAnimation } from '@/styles/Animations.ts';
 import {
   logoCardsData,
   sugarizerData,
@@ -31,7 +31,14 @@ const SugarizerPage = () => {
           />
         </motion.div>
 
-        <img src={mockupImage.path} alt="TurtleMockup" />
+        <motion.img
+          src={mockupImage.path}
+          alt="SugarizerMockup"
+          variants={zoomFadeInAnimation}
+          initial="initial"
+          animate="animate"
+          className="w-[80%] mx-auto"
+        />
 
         <h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10">
           Try it now!

src/pages/TryNow/TurtleBlocks.tsx

@@ -3,7 +3,7 @@ import Footer from '@/sections/Footer';
 import FeatureSection from '@/components/TryNow/FeatureSection';
 import Paragraph from '@/components/TryNow/Paragraph';
 import { motion } from 'framer-motion';
-import { fadeInUpAnimation } from '@/styles/Animations.ts';
+import { fadeInUpAnimation, zoomFadeInAnimation } from '@/styles/Animations.ts';
 import {
   turtleBlocksData,
   turtleBlocksSections,
@@ -50,7 +50,14 @@ const TurtleBlocksPage = () => {
           probably want to use Turtle Blocks rather than Turtle Blocks JS.
         </p>
 
-        <img src={mockupImage.path} alt="TurtleMockup" />
+        <motion.img
+          src={mockupImage.path}
+          alt="TurtleMockup"
+          variants={zoomFadeInAnimation}
+          initial="initial"
+          animate="animate"
+          className="w-[80%] mx-auto"
+        />
 
         {/* Render Paragraph components dynamically */}
         {turtleBlocksSections.map((section, index) => (

src/styles/Animations.ts

@@ -1035,3 +1035,15 @@ export const fadeInUpAnimation: Variants = {
     },
   },
 };
+export const zoomFadeInAnimation: Variants = {
+  initial: { opacity: 0, scale: 0.9 }, // Start with a slight shrink and hidden
+  animate: {
+    opacity: 1,
+    scale: 1, // Smoothly zoom to normal size
+    transition: {
+      delay: 1, // Starts after 2 seconds (optional, tweak as needed)
+      duration: 1.5, // Takes 1.5 seconds
+      ease: 'easeOut',
+    },
+  },
+};