# Shift Timetable Careers > A careers section that draws every open role as a shift across one working day under a pinned hours ruler: set the hours you could work and the roles that fit rise to the top, each shift filling where it overlaps. Canonical: https://gsapvault.com/sections/shift-timetable-careers-section Live demo: https://gsapvault.com/demos/shift-timetable-careers-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | advanced | | Plugins | Flip | | Techniques | flip-layout, filter, range-input, custom-properties, keyboard-navigation, progressive-enhancement, container-queries, responsive-section | | Uses Lenis | No | ## Overview Shift Timetable Careers Section is the careers block for an employer whose work runs in shifts: restaurants and bars, hotels, care homes, hospitals, shops, warehouses and transport. It answers an applicant's first two questions, what is it like to work here and is there a role that fits my life, and takes them to an apply page for the role they choose. A framed photograph of the bar at evening service, with the title in tracked serif capitals set over it, leads straight into the board. Every open role is drawn as a shift on one shared day axis, with the night shaded, so the board shows at a glance which jobs are nights, early mornings or office hours. A dark hours ruler pins to the top of the timetable while the roles scroll beneath it, so every bar can be read against the hours. Drag its two handles or press a quick-hours button such as School hours: the window sweeps down the board, each shift fills with the accent where it overlaps, and the roles regroup under Fits your hours, Overlaps your hours and Outside your hours, each saying how far it runs over. Team buttons narrow the list, and each role opens in place to show a photo, pay, pattern and its apply link. When nothing fits, the section says so and names the nearest shift. The fictional Calder's example, a restaurant and late bar in Leeds, is set on warm paper in Brygada 1918 with a claret accent; its fourteen roles run from 06:00 deliveries to a bar that closes at two, and each opens onto one of nine further generated documentary photographs of the kitchen, the dining room, the bar and the office. Every role is an ordinary list item with two time elements, so a buyer adds, removes or reorders roles in HTML. ## Features - Every role drawn as a shift bar on one shared day axis, with the night shaded and overnight shifts drawn as one unbroken bar - A pinned hours ruler (readout, day axis, two native range handles, fit count) stays at the top of the timetable while the roles scroll, and lets go where the timetable ends - The chosen window sweeps down every row live and each shift fills where it overlaps - Roles regroup with GSAP Flip into fits, overlaps and outside, each overlap saying how far it runs over - Quick-hours buttons (mornings, school hours, office hours, evenings, late nights) sweep the window before regrouping - Team buttons and counts generated from the markup; counts show how many roles in each team fit your hours - Honest empty state that names the nearest shift and links to an open application - Roles open in place with photo, pay, pattern and an apply link - Interruptible throughout: new input always settles on the last hours requested - Every role, its hours and its apply link readable with no JavaScript - Container-aware layout with a sticky hour ruler, independent instances and exact teardown ## Use Cases - Restaurants, bars and hospitality groups hiring for mornings, service, late bars and closing shifts - Care homes and hospital bank staff with day, twilight and waking-night shifts - Retail, warehouse and delivery operators recruiting across shift patterns - Any careers page where working hours decide whether a role is possible ## Vibe-Code Ready Setup This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works The section starts as an ordinary ordered list of roles, each with a title, a team, two time elements for the shift and a details block with its apply link. The script reads those times, places each shift on a 24-hour axis that begins at the hour set on the section root (so a late bar shift is one bar), and adds a bar, a status line and a details button to every row. Team buttons are built from the team names in the markup. The visitor's window is two CSS custom properties on the section. Dragging a handle tweens them towards the new hours; each bar's filled part and the window's column are pure CSS calculations from those two numbers, so the whole board follows the handles every frame without layout work. A moment after the handle is released, the roles are classified, reordered into fits, overlaps and outside with group labels and moved into place with Flip.getState and Flip.from. A quick-hours button tweens the window across the day first and regroups when it arrives. New input kills the running sweep and tweens from where the window is drawn; a new regroup captures positions mid-flight, kills the previous Flip and continues from there, so repeated or reversed input always settles on the last request. Reduced motion, including a change while the page is open, applies every change instantly, and teardown restores the original list, order and markup. ## Documentation How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Quick Start Copy these into your project: - the `
` element from `index.html`, between the `EXTRACT START` and `EXTRACT END` comments - `assets/style.css` - `assets/script.js` - `assets/img/` (or your own photographs) Load the font and styles, then GSAP, Flip and the section script after the markup: _Code snippet omitted: it ships with the download._ Everything outside the `
` in `index.html` (the page background and body margin) is demo furniture. No build step is needed. ### Make it yours #### Roles Each role is one `
  • ` inside `
      `. To add a role, copy a whole `
    1. ` and edit it; to remove or reorder roles, delete or move whole `
    2. ` elements. Within each group the board keeps your order, so put the roles you most want to fill first. | What | Where | | --- | --- | | Title | `.stc-role__title` | | Team | `.stc-role__team` text. The team buttons and their counts are built from these, in order of first appearance | | Place and contract | the rest of `.stc-role__meta` | | Shift | the two `