Skip to content

feat: add scroll-driven animation to About page Timeline section #691

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Zahnentferner merged 1 commit into from
Mar 19, 2026
Merged

feat: add scroll-driven animation to About page Timeline section #691

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 83 additions & 49 deletions src/components/about/Timeline.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,93 @@
'use client'

import { useRef } from 'react'
import { TimelineElement } from './TimelineElement'
import { motion } from 'framer-motion'
import { motion, useScroll, useTransform } from 'framer-motion'

export function Timeline() {
const containerRef = useRef(null)
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ["start 80%", "end 20%"]
})

const lineHeight = useTransform(scrollYProgress, [0, 1], ["0%", "100%"])
const glowY = useTransform(scrollYProgress, [0, 1], ["0%", "100%"])
const lineOpacity = useTransform(scrollYProgress, [0, 0.05, 0.95, 1], [0, 1, 1, 0])

return (
<div className="py-12" id="timeline">
<motion.h2
initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="text-3xl font-bold font-mono text-center mb-12 text-zinc-900 dark:text-zinc-100"
>
Our <span className="text-[#00843D] dark:text-yellow-400">Journey</span>
</motion.h2>
<div className="max-w-3xl mx-auto px-4">
<ol className="relative border-l border-zinc-200 dark:border-zinc-700">
<TimelineElement
title="AOSSIE's First Projects"
time="2011"
description="3 of AOSSIE's first projects (Skeptik/Scavenger, Carbon Footprint for Google Maps and Mind the Word) were started by Dr. Bruno Woltzenlogel Paleo and started participating in GSoC under the CSE@TU-Wien org."
/>
<TimelineElement
title="AOSSIE's Creation"
time="2016"
description="Dr. Bruno Woltzenlogel Paleo created the Australian Open Source Software Innovation and Education (AOSSIE) while he was a researcher at the Australian National University."
/>
<TimelineElement
title="First GSoC Participation"
time="2016"
description="We participated in Google Summer of Code for the first time, mentoring students from around the world. Our Agora voting project became our fourth project."
/>
<TimelineElement
title="AOSSIE's Independence"
time="2017"
description="AOSSIE was established as an independent not-for-profit charity organization."
/>
<TimelineElement
title="Pace Acceleration"
time="2020"
description="In 2020, AOSSIE accelerated its innovation pace and started several new projects, especially using emerging technologies such as blockchains and AI."
/>
<TimelineElement
title="Stability Nexus Spin-Off"
time="2022"
description="In 2022, AOSSIE's blockchain projects were grouped under the Stability Nexus sub-organization."
/>
<TimelineElement
title="Becoming an AI-Powered AI-Ready Organization"
time="2025--2026"
description="AOSSIE is radically transforming its processes to fully benefit from AI productivity boosts while protecting itself from AI slop."
/>
</ol>
</div>
<motion.h2
initial={{ opacity: 0, y: -30, scale: 0.95 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.7, ease: "easeOut" }}
className="text-3xl font-bold font-mono text-center mb-12 text-zinc-900 dark:text-zinc-100"
>
Our <span className="text-[#00843D] dark:text-yellow-400">Journey</span>
</motion.h2>

<div className="max-w-3xl mx-auto px-4">
<ol ref={containerRef} className="relative">

{/* background track line */}
<div className="absolute left-[-1px] top-0 h-full w-[3px] rounded-full bg-zinc-200 dark:bg-zinc-700" />

{/* highlighted animated line */}
<motion.div
className="absolute left-[-1px] top-0 w-[3px] rounded-full origin-top bg-yellow-400"
style={{ height: lineHeight, opacity: lineOpacity }}
/>

{/* travelling dot */}
<motion.div
className="absolute -left-[7px] w-[15px] h-[15px] rounded-full z-10 bg-yellow-400"
style={{ top: glowY }}
>
{/* pulsing ring 1 */}
<motion.span
animate={{ scale: [1, 2.5, 1], opacity: [0.7, 0, 0.7] }}
transition={{ duration: 1.6, repeat: Infinity, ease: "easeOut" }}
className="absolute inset-0 rounded-full bg-yellow-400"
/>
{/* pulsing ring 2 — offset */}
<motion.span
animate={{ scale: [1, 2, 1], opacity: [0.4, 0, 0.4] }}
transition={{ duration: 1.6, repeat: Infinity, ease: "easeOut", delay: 0.5 }}
className="absolute inset-0 rounded-full bg-yellow-300"
/>
</motion.div>

<TimelineElement index={0}
title="AOSSIE's First Projects" time="2011"
description="3 of AOSSIE's first projects (Skeptik/Scavenger, Carbon Footprint for Google Maps and Mind the Word) were started by Dr. Bruno Woltzenlogel Paleo and started participating in GSoC under the CSE@TU-Wien org."
/>
<TimelineElement index={1}
title="AOSSIE's Creation" time="2016"
description="Dr. Bruno Woltzenlogel Paleo created the Australian Open Source Software Innovation and Education (AOSSIE) while he was a researcher at the Australian National University."
/>
<TimelineElement index={2}
title="First GSoC Participation" time="2016"
description="We participated in Google Summer of Code for the first time, mentoring students from around the world. Our Agora voting project became our fourth project."
/>
<TimelineElement index={3}
title="AOSSIE's Independence" time="2017"
description="AOSSIE was established as an independent not-for-profit charity organization."
/>
<TimelineElement index={4}
title="Pace Acceleration" time="2020"
description="In 2020, AOSSIE accelerated its innovation pace and started several new projects, especially using emerging technologies such as blockchains and AI."
/>
<TimelineElement index={5}
title="Stability Nexus Spin-Off" time="2022"
description="In 2022, AOSSIE's blockchain projects were grouped under the Stability Nexus sub-organization."
/>
<TimelineElement index={6}
title="Becoming an AI-Powered AI-Ready Organization" time="2025--2026"
description="AOSSIE is radically transforming its processes to fully benefit from AI productivity boosts while protecting itself from AI slop."
/>
Comment on lines +61 to +88
Copy link

@coderabbitai coderabbitai bot Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify TimelineElement's function signature and whether index is used
echo "=== TimelineElement function signature ==="
rg -n "function TimelineElement|const TimelineElement|export.*TimelineElement" src/components/about/TimelineElement.jsx

echo ""
echo "=== Check if 'index' is referenced anywhere in TimelineElement ==="
rg -n "index" src/components/about/TimelineElement.jsx || echo "No references to 'index' found"

Repository: AOSSIE-Org/Website

Length of output: 269

Remove unused index props or implement them for staggered animations in TimelineElement.

The index prop is passed to TimelineElement in lines 61–88 but the component only destructures {title, description, time} and never uses index. If these props were intended to enable alternating or staggered animations (as mentioned in the PR description), update TimelineElement to actually reference the index in its animation logic. Otherwise, remove the index props from all TimelineElement instances.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/about/Timeline.jsx` around lines 61 - 88, The TimelineElement
instances are being passed an unused index prop; either remove index from all
TimelineElement usages or update the TimelineElement component (where it
destructures {title, description, time}) to also accept index and apply it to
its animation/staggering logic (e.g., use index to compute animation delay,
alternate side placement, or conditional classes). Locate the TimelineElement
component and either delete index from the props list and from all
TimelineElement JSX here, or add index to the destructured props and incorporate
it into the animation/timing/position calculations so the staggered/alternating
behavior mentioned in the PR works.

</ol>
</div>
</div>
)
}