aida_front/src/views/AwardPage/components/TimeLine.vue

<template>
	<div
		ref="containerRef"
		class="timeline-container container flex flex-col align-center"
	>
		<div class="timeline-title">Competition Timeline</div>
		<div class="desc">Shaping the Future</div>
		<div class="timeline-point">
			<div class="labels-row flex align-center">
				<div
					class="item-label flex flex-col"
					v-for="item in points"
					:key="'label-' + item.time"
				>
					<div class="main-label">{{ item.label }}</div>
					<div
						class="sub-label"
						v-if="item.subLabel"
					>
						{{ item.subLabel }}
					</div>
				</div>
			</div>
			<!-- Icons row -->
			<div class="icons-row flex align-center">
				<div class="timeline-line"></div>
				<img
					src="@/assets/images/award/point.png"
					class="point-icon"
					v-for="item in points"
					:key="'icon-' + item.time"
				/>
			</div>

			<!-- Times row -->
			<div class="times-row flex align-center">
				<div
					class="item-time"
					v-for="item in points"
					:key="'time-' + item.time"
				>
					{{ item.time }}
				</div>
			</div>
			<!-- Descriptions row -->
			<div class="descs-row flex align-center">
				<div
					class="item-desc flex justify-center"
					v-for="item in points"
					:key="'desc-' + item.time"
				>
					<div class="txt">
						{{ item.desc }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
	import { gsap } from 'gsap'

	const containerRef = ref<HTMLElement | null>(null)
	const hasAnimated = ref(false)

	const points = ref([
		{
			label: 'Select Top 20',
			time: 'May',
			desc: 'Submit your design concept, mood board, and initial sketch.'
		},
		{
			label: `Top 20`,
			subLabel: 'Collections  Finalize',
			time: 'June',
			desc: 'Complete collections, physical garments, and AiDA process videos due.'
		},
		{
			label: `Top 3`,
			subLabel: 'Finalists Select',
			time: 'August',
			desc: 'Complete collections, physical garments, and AiDA process videos due.'
		},
		{
			label: 'Award  Ceremony',
			time: 'November',
			desc: 'Winners revealed with media coverage and live showcase.'
		}
	])

	const playAnimation = () => {
		if (!containerRef.value || hasAnimated.value) return
		const title = containerRef.value.querySelector('.timeline-title')
		const subtitle = containerRef.value.querySelector('.desc')
		const line = containerRef.value.querySelector('.timeline-line')
		const timeline = containerRef.value.querySelector('.timeline-point')

		const tl = gsap.timeline()
		if (title && subtitle) {
			tl.from([title, subtitle], {
				scaleX: 0,
				autoAlpha: 0,
				transformOrigin: '50% 50%',
				duration: 0.6,
				stagger: 0.1,
				ease: 'power2.out'
			})
		}

		if (timeline) {
			tl.fromTo(
				timeline,
				{
					clipPath: 'inset(0 100% 0 0)'
				},
				{
					clipPath: 'inset(0 0% 0 0)',
					duration: 1.6,
					ease: 'power1.out'
				}
			)
		}

		if (line) {
			tl.from(
				line,
				{
					scaleX: 0,
					transformOrigin: '0% 50%',
					duration: 1.3,
					ease: 'power1.out'
				},
				'-=1.1'
			)
		}

		hasAnimated.value = true
	}

	let observer: IntersectionObserver | null = null

	onMounted(async () => {
		await nextTick()
		if (!containerRef.value) return
		observer = new IntersectionObserver(
			(entries) => {
				entries.forEach((entry) => {
					if (entry.isIntersecting) {
						playAnimation()
					}
				})
			},
			{ threshold: 0.3 }
		)
		observer.observe(containerRef.value)
	})

	onBeforeUnmount(() => {
		if (observer && containerRef.value) {
			observer.unobserve(containerRef.value)
		}
		observer = null
	})
</script>

<style scoped lang="less">
	.timeline-container {
		background: url('@/assets/images/award/timeline_bg.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		padding-top: 12.8rem;
		width: 100%;
		color: #fff;
		.timeline-title {
			font-family: 'PoppinsBold';
			font-weight: 600;
			font-size: 4rem;
			text-align: center;
			vertical-align: middle;
		}
		.logo {
			margin: 2.4rem 0 2.2rem 0;
		}
		.desc {
			font-family: 'Arial';
			font-size: 3rem;
			font-weight: 400;
			color: #f95750;
		}
		.timeline-point {
			overflow: hidden;
			will-change: clip-path;
			flex: 1;
			width: 100%;
			margin-top: 12rem;
			padding: 0 21.2rem 0 22rem;
			position: relative;
			z-index: 2;

			.labels-row {
				position: relative;
				z-index: 2;
				margin-bottom: 8rem;
				.item-label {
					flex: 1;
					color: #fff;
					font-family: 'PoppinsBold';
					font-weight: 600;
					font-size: 2.8rem;
					text-align: center;
					white-space: pre-line;
					height: 6rem;
					justify-content: center;
				}
			}

			.icons-row {
				margin-bottom: 1.6rem;
				position: relative;
				z-index: 2;
				.point-icon {
					width: 6.4rem;
					height: 6.4rem;
					display: block;
					margin: 0 auto;
					z-index: 2;
				}
				.timeline-line {
					width: calc(100% + 22rem + 21.2rem);
					left: -22rem;
					height: 0.15rem;
					background: linear-gradient(
						90deg,
						rgba(199, 52, 44, 0) 0%,
						rgba(199, 52, 44, 0.719626) 25.96%,
						#c7342c 51.44%,
						rgba(199, 52, 44, 0.762376) 75.96%,
						rgba(199, 52, 44, 0) 100%
					);
					position: absolute;
					bottom: 50%;
					transform: translateY(-50%);
					z-index: 1;
				}
			}

			.times-row {
				margin-bottom: 6rem;
				z-index: 2;
				position: relative;
				.item-time {
					flex: 1;
					color: #f95750;
					font-family: 'Arial';
					font-weight: 400;
					font-size: 2.8rem;
					line-height: 4.5rem;
					text-align: center;
				}
			}

			.descs-row {
				.item-desc {
					flex: 1;
					.txt {
						font-family: 'Arial';
						font-weight: 400;
						font-size: 2rem;
						text-align: center;
						color: #e0e0e0;
						width: 31.2rem;
						height: 10.2rem;
					}
				}
			}
		}
	}
</style>