Merge pull request #682 from madhavansingh/fix/apply-page-icon-shift

fix: resolve icon shifting issue while scrolling on Apply page

Author: Zahnentferner

src/components/about/TimelineElement.jsx

@@ -1,25 +1,49 @@
-'use client'
-
-import clsx from "clsx"
+"use client"
 import { motion } from "framer-motion"
 
-export function TimelineElement({ title, description, button, time, link, classCondition }) {
+export function TimelineElement({ title, description, time }) {
     return (
-        <motion.li 
-            initial={{ opacity: 0, x: -30 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-            className="mb-10 ml-6"
-        >
-            <span className="absolute flex items-center justify-center w-6 h-6 bg-green-100 rounded-full -left-3 ring-8 ring-white dark:ring-zinc-900 dark:bg-yellow-900 scale-150">
-                <svg aria-hidden="true" className="w-3 h-3 text-green-800 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                    <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd"></path>
+        <li className="mb-10 ml-6">
+            <motion.span
+                initial={{ opacity: 0, x: 50 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true, amount: 0.5 }}
+                transition={{ type: "spring", stiffness: 50, damping: 20 }}
+                className="absolute flex items-center justify-center w-6 h-6 bg-green-100 rounded-full -left-3 ring-8 ring-white dark:ring-zinc-900 dark:bg-yellow-900 scale-150"
+            >
+                <svg
+                    aria-hidden="true"
+                    className="w-3 h-3 text-green-800 dark:text-yellow-300"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        fillRule="evenodd"
+                        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                        clipRule="evenodd"
+                    />
                 </svg>
-            </span>
-            <h3 className="flex font-mono tracking-tighter items-center mb-1 text-xl font-bold text-gray-900 dark:text-white ml-2">{title}</h3>
-            <time className="block mb-2 font-mono text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{time}</time>
-            <p className="mb-4 font-mono tracking-tight text-base font-normal text-gray-500 dark:text-gray-400 ml-2">{description}</p>
-        </motion.li>
+            </motion.span>
+
+            <motion.div
+                initial={{ opacity: 0, x: 50 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true, amount: 0.5 }}
+                transition={{ type: "spring", stiffness: 50, damping: 20, delay: 0.1 }}
+            >
+                <h3 className="flex font-mono tracking-tighter items-center mb-1 text-xl font-bold text-gray-900 dark:text-white ml-2">
+                    {title}
+                </h3>
+
+                <time className="block mb-2 font-mono text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+                    {time}
+                </time>
+
+                <p className="mb-4 font-mono tracking-tight text-base font-normal text-gray-500 dark:text-gray-400 ml-2">
+                    {description}
+                </p>
+            </motion.div>
+        </li>
     )
-}
+}

src/components/apply/ApplyHeader.jsx

@@ -1,12 +1,16 @@
 'use client'
 
 import { Container } from '@/components/shared/Container'
-import { motion } from 'framer-motion'
+import { motion, useScroll, useTransform, useSpring } from 'framer-motion'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faDiscord, faGithub} from '@fortawesome/free-brands-svg-icons'
 import { faLightbulb, faComments, faPaperPlane } from '@fortawesome/free-solid-svg-icons'
 
 export function ApplyHeader({ children }) {
+    const { scrollY } = useScroll();
+    const smoothScroll = useSpring(scrollY, { stiffness: 100, damping: 30, restDelta: 0.001 });
+    const translateX = useTransform(smoothScroll, [0, 800], [0, -30]);
+
     const steps = [
         { icon: faDiscord, label: "Join Discord" },
         { icon: faGithub, label: "Start Contributing" },
@@ -34,6 +38,7 @@ export function ApplyHeader({ children }) {
 
                 {/* New Horizontal Timeline Steps */}
                 <motion.div 
+                    style={{ x: translateX }}
                     initial="hidden"
                     whileInView="visible"
                     viewport={{ once: true }}