# Index Tab Footer > A calm Scandinavian shop footer: the site directory is a file of coloured index cards, and choosing a tab lifts that card out of the file and sets it down in front, beside the address, live opening hours and contact details. Canonical: https://gsapvault.com/sections/index-tab-footer-section Live demo: https://gsapvault.com/demos/index-tab-footer-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | accessible-tabs, interruptible-transitions, state-transition, progressive-enhancement, keyboard-navigation, reduced-motion, container-queries, responsive-section | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 28 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview Index Tab Footer is the end of a page for a shop or studio with more on its site than a few links: where to shop, where to get help, how to visit and who is behind it, with the address, opening hours and contact details always in view. It is set on a soft clay field in a rounded humanist sans, with each part of the directory on its own coloured card and a carefully lit photograph beside its links. The cards are filed one behind another, and every card's tab stands above the file so the whole directory is one glance away. Choose a tab and that card rises out of the file, past the cards in front of it, then settles down at the front while the others slide back one place. Change your mind while it is rising and it sinks back into its slot; choose another and that one rises instead. Below the file, the opening-hours list drives a live line saying whether the shop is open now, in the shop's own time zone. The fictional Lune example is a Copenhagen homeware shop selling ceramics, linen and lamps. The same structure suits a bookshop, a florist, a gallery shop, a bakery with a café or any business whose visitors want the next page or the opening hours. Replace the fictional copy, generated concept photography and example contact details with your own. ## Features - Site directory as a file of coloured index cards, with every tab visible above the file - Choosing a tab lifts that card out of its place in the file and sets it down in front; the rest settle back one slot - Changing your mind mid-lift sinks the card back; rapid choices always settle on the last one - Tabs are built from each card's heading, so links and labels are edited in the HTML only - Live open or closed line computed from the opening-hours list in the shop's own time zone - Address, hours, phone, email and social links always visible under the file - Arrow-key, Home and End tab navigation; inactive cards are hidden from assistive technology and focus - Without JavaScript every card shows in full as an ordinary list; without GSAP or with reduced motion the file reorders instantly - Phone layout keeps the tabs directly above the card they open, photograph first - Independent instances, change event, programmatic go() and exact teardown ## Use Cases - Homeware, ceramics and textile shops with a physical store - Bookshops, florists and gallery shops with opening hours to show - Studios and small brands with shop, help, visit and about pages - Cafés and bakeries with a shop and events ## 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 footer is a real footer element with a nav holding one section per card, each with its heading, a short line, a list of links and a photograph. The script builds a tab for each card from its heading and sets the card colour on the tab, then stacks all cards in one grid cell so the file keeps the height of its tallest card. Each card has a slot: the front card sits flush and every card behind it steps up a few pixels, so the edges of the file show above the front card. Choosing a tab lowers the chosen card's layer to just behind the cards that were in front of it and tweens it upward, so it is visibly pulled out from its place. At the top of the rise it moves to the front layer and settles down with a long, damped ease while the photograph eases from a slight zoom. The other cards glide to their new slots at the same time. The script tracks which card is really on top, so choosing that card mid-rise sends the rising card back into its slot rather than restarting anything. Opening hours are list items with data-days, data-open and data-close. The status line reads the current weekday and time in the root's data-itf-tz time zone with Intl.DateTimeFormat, marks today's row and updates each minute. Reduced motion, or no GSAP, makes every change instant, including when the preference changes while the page is open. ## 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 1. Copy `assets/style.css`, `assets/script.js` and `assets/img/` into your project. 2. Load the font, the stylesheet, GSAP and the script: _Code snippet omitted: it ships with the download._ 3. Copy the markup between the `copy from here` and `copy to here` comments in `index.html`. The root is `