Skip to content

Commit d8edfc8

Browse files
ZahnentfernerZahnentferner
authored
Merge pull request #691 from ankitkr104/feature/scroll-driven-timeline-animation
feat: add scroll-driven animation to About page Timeline section
2 parents 9904c0b + c54db8c commit d8edfc8

1 file changed

Lines changed: 83 additions & 49 deletions

File tree

‎src/components/about/Timeline.jsx‎

Lines changed: 83 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,93 @@
11
'use client'
22

3+
import { useRef } from 'react'
34
import { TimelineElement } from './TimelineElement'
4-
import { motion } from 'framer-motion'
5+
import { motion, useScroll, useTransform } from 'framer-motion'
56

67
export function Timeline() {
8+
const containerRef = useRef(null)
9+
const { scrollYProgress } = useScroll({
10+
target: containerRef,
11+
offset: ["start 80%", "end 20%"]
12+
})
13+
14+
const lineHeight = useTransform(scrollYProgress, [0, 1], ["0%", "100%"])
15+
const glowY = useTransform(scrollYProgress, [0, 1], ["0%", "100%"])
16+
const lineOpacity = useTransform(scrollYProgress, [0, 0.05, 0.95, 1], [0, 1, 1, 0])
17+
718
return (
819
<div className="py-12" id="timeline">
9-
<motion.h2
10-
initial={{ opacity: 0, y: -20 }}
11-
whileInView={{ opacity: 1, y: 0 }}
12-
viewport={{ once: true }}
13-
transition={{ duration: 0.5 }}
14-
className="text-3xl font-bold font-mono text-center mb-12 text-zinc-900 dark:text-zinc-100"
15-
>
16-
Our <span className="text-[#00843D] dark:text-yellow-400">Journey</span>
17-
</motion.h2>
18-
<div className="max-w-3xl mx-auto px-4">
19-
<ol className="relative border-l border-zinc-200 dark:border-zinc-700">
20-
<TimelineElement
21-
title="AOSSIE's First Projects"
22-
time="2011"
23-
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."
24-
/>
25-
<TimelineElement
26-
title="AOSSIE's Creation"
27-
time="2016"
28-
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."
29-
/>
30-
<TimelineElement
31-
title="First GSoC Participation"
32-
time="2016"
33-
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."
34-
/>
35-
<TimelineElement
36-
title="AOSSIE's Independence"
37-
time="2017"
38-
description="AOSSIE was established as an independent not-for-profit charity organization."
39-
/>
40-
<TimelineElement
41-
title="Pace Acceleration"
42-
time="2020"
43-
description="In 2020, AOSSIE accelerated its innovation pace and started several new projects, especially using emerging technologies such as blockchains and AI."
44-
/>
45-
<TimelineElement
46-
title="Stability Nexus Spin-Off"
47-
time="2022"
48-
description="In 2022, AOSSIE's blockchain projects were grouped under the Stability Nexus sub-organization."
49-
/>
50-
<TimelineElement
51-
title="Becoming an AI-Powered AI-Ready Organization"
52-
time="2025--2026"
53-
description="AOSSIE is radically transforming its processes to fully benefit from AI productivity boosts while protecting itself from AI slop."
54-
/>
55-
</ol>
56-
</div>
20+
<motion.h2
21+
initial={{ opacity: 0, y: -30, scale: 0.95 }}
22+
whileInView={{ opacity: 1, y: 0, scale: 1 }}
23+
viewport={{ once: true }}
24+
transition={{ duration: 0.7, ease: "easeOut" }}
25+
className="text-3xl font-bold font-mono text-center mb-12 text-zinc-900 dark:text-zinc-100"
26+
>
27+
Our <span className="text-[#00843D] dark:text-yellow-400">Journey</span>
28+
</motion.h2>
29+
30+
<div className="max-w-3xl mx-auto px-4">
31+
<ol ref={containerRef} className="relative">
32+
33+
{/* background track line */}
34+
<div className="absolute left-[-1px] top-0 h-full w-[3px] rounded-full bg-zinc-200 dark:bg-zinc-700" />
35+
36+
{/* highlighted animated line */}
37+
<motion.div
38+
className="absolute left-[-1px] top-0 w-[3px] rounded-full origin-top bg-yellow-400"
39+
style={{ height: lineHeight, opacity: lineOpacity }}
40+
/>
41+
42+
{/* travelling dot */}
43+
<motion.div
44+
className="absolute -left-[7px] w-[15px] h-[15px] rounded-full z-10 bg-yellow-400"
45+
style={{ top: glowY }}
46+
>
47+
{/* pulsing ring 1 */}
48+
<motion.span
49+
animate={{ scale: [1, 2.5, 1], opacity: [0.7, 0, 0.7] }}
50+
transition={{ duration: 1.6, repeat: Infinity, ease: "easeOut" }}
51+
className="absolute inset-0 rounded-full bg-yellow-400"
52+
/>
53+
{/* pulsing ring 2 — offset */}
54+
<motion.span
55+
animate={{ scale: [1, 2, 1], opacity: [0.4, 0, 0.4] }}
56+
transition={{ duration: 1.6, repeat: Infinity, ease: "easeOut", delay: 0.5 }}
57+
className="absolute inset-0 rounded-full bg-yellow-300"
58+
/>
59+
</motion.div>
60+
61+
<TimelineElement index={0}
62+
title="AOSSIE's First Projects" time="2011"
63+
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."
64+
/>
65+
<TimelineElement index={1}
66+
title="AOSSIE's Creation" time="2016"
67+
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."
68+
/>
69+
<TimelineElement index={2}
70+
title="First GSoC Participation" time="2016"
71+
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."
72+
/>
73+
<TimelineElement index={3}
74+
title="AOSSIE's Independence" time="2017"
75+
description="AOSSIE was established as an independent not-for-profit charity organization."
76+
/>
77+
<TimelineElement index={4}
78+
title="Pace Acceleration" time="2020"
79+
description="In 2020, AOSSIE accelerated its innovation pace and started several new projects, especially using emerging technologies such as blockchains and AI."
80+
/>
81+
<TimelineElement index={5}
82+
title="Stability Nexus Spin-Off" time="2022"
83+
description="In 2022, AOSSIE's blockchain projects were grouped under the Stability Nexus sub-organization."
84+
/>
85+
<TimelineElement index={6}
86+
title="Becoming an AI-Powered AI-Ready Organization" time="2025--2026"
87+
description="AOSSIE is radically transforming its processes to fully benefit from AI productivity boosts while protecting itself from AI slop."
88+
/>
89+
</ol>
90+
</div>
5791
</div>
5892
)
5993
}

0 commit comments

Comments
 (0)