GSAP Conference Schedule Section with a Live Now Line
Overview
An event agenda for React and Next.js with day tabs and a track filter. Rows tip into place one after another, a talk opens inline, and a line marks the current time, sitting exactly where the clock falls within the running session.
Changing the day or the track turns the rows over one after another, like a departures board, while the list eases to its new height. On the day itself the board opens on today, finished talks dim, the running one is marked live, and a thin line sits at the matching point inside its row. Between talks, the line waits above the next one.
Details
- Category
- Schedule
- Interaction
- On Click + On Scroll + On Load
- Trigger
- On Click
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 088 / Testimonials
GSAP Testimonials Section with Auto-Advancing Quotes
On Load · On Click · On Hover · On Scroll
No. 045 / FAQ
GSAP FAQ Accordion Section with Smooth Height Animation
On Click · On Hover · On Scroll
No. 036 / Careers
GSAP Careers Page Section with Animated Job Filters
On Click · On Hover · On Scroll
(02)FAQ
GSAP Conference Schedule Section with a Live Now Line — FAQ
01How do I add my schedule?
Pass days, each with a date as YYYY-MM-DD, a label and its sessions. Sessions need a 24-hour start and end, and a title. speaker, role, track, room and details are all optional.
02How does it know the current time?
It reads the browser clock every 15 seconds. Set timeZone to your conference's IANA name, like Europe/Lisbon. Without it, the visitor's own time zone is used.
03Why can't I see the line on my page?
The line only shows on the date in question, and only until the last session ends. To check how it looks at another time, pass now with a date and a time, which is what this preview's slider does.
04What about lunch and other breaks?
Set slim on a session for a thin row, and leave out track so it stays visible under every filter. A session without details can't be opened.
05What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. It uses --font-bricolage and --font-jetbrains, which you can swap for your own fonts, and the text colour comes from your page or className.
06What happens with reduced motion?
Rows and panels change instantly and the now line jumps to its place instead of sliding. The live marker stops pulsing.