# Food Truck Template > A complete one-page site for a street-food truck, built around an illustrated route map: pick a day of the week and the van drives along the route to that day's pitch with MotionPathPlugin, wheels turning, exhaust puffing on arrival, each pin revealing a photo of its pitch. Canonical: https://gsapvault.com/templates/food-truck-template Live demo: https://gsapvault.com/demos/food-truck-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £12 | | Difficulty | intermediate | | Plugins | ScrollTrigger, MotionPathPlugin | | Techniques | motion-path, svg-animation, scroll-reveal, stagger, infinite-loop, keyboard-navigation, hover-effect | | Uses Lenis | Yes | ## Overview A production-ready one-pager for a street-food truck, painted like the van itself: a hot chilli-red ground with cream signwriting, mustard kept for fills and badges, and one deep griddle-smoke brown for the menu board and every panel where dense text needs a quieter surface. The hero is a photograph of the van, wide and smoke-framed under the headline, and all seventeen bundled WebP photographs share one bright, warm grade baked into the pixels, so the food, the pitches and the crowds read as a single sunny campaign. The signature is the route map. The week's pitches are pins on an illustrated city map, cream paper, smoke linework, drawn blocks, a harbour with two bridges, and the day picker is a real radiogroup: choose a day and the van drives along the route to that day's pin with MotionPathPlugin, wheels turning with the distance covered, flipping to face the way it's going, puffing exhaust when it arrives while the pin pops, a photo of that pitch appears above it, and the pitch card below updates with the photo, location and hours. Hovering any pin previews its pitch photo without changing the selection, and the van finds its own way: each pin's position along the route is measured at runtime, so moving a pin or redrawing the route needs no other change. Around it the page keeps the community in frame: a menu board with dotted price leaders, a scene section of markets, festivals and trestle tables, a catering section priced per head, and a follow section built around the handle. Swap the dishes, pitches and photos, repaint five colour tokens, and deploy it as static files. There is no build step. ## Features - Complete deployable one-page site: nav, photographic hero, menu board, route map, community gallery, catering, follow, footer - Signature route map: an illustrated SVG city map where picking a day drives the van along the route to that day's pin with MotionPathPlugin - autoRotate heading, wheels spinning with the distance covered, an exhaust puff and a pin pop on arrival - Every pitch has a location photo: hovering a pin previews it in a paper-framed popover on the map, selecting a day reveals it on arrival, and the pitch card below repeats it as real content so touch users get it too - Pins are located along the route at runtime by nearest-point measurement, so you can move a pitch or redraw the route and the drive still lands - The day picker is a real radiogroup with roving tabindex and full arrow-key, Home and End navigation - selection follows focus - A photographic hero of the van itself in a smoke-framed panel: a wide crop on desktop, a tighter crop under 720px, and a caption sitting on a gradient scrim measured against the baked pixels - A community section of festival fields, golden-hour vans, trestle tables and bunting - the crowd the van feeds, not just the food - Seventeen bundled WebP photographs baked to one bright, warm grade, about 1.3MB for the whole set, every image with an alt, dimensions and a colour fallback - Menu board with dotted price leaders, mono pricing and a two-column burgers/sides layout that reads like the truck's own hatch board - Five-colour token block with RGB triples and a measured contrast table in the stylesheet header - a reskin is a five-value edit - Degrades completely: with JavaScript off all seven days' pitches read as a plain photo-illustrated list and the van sits parked at the yard - Reduced motion keeps the picker fully working - the van is placed at the chosen pin instantly and its pitch photo appears without animation - Lenis smooth scrolling wired in and fully optional ## Use Cases - Food trucks, coffee carts, and any street-food business that moves between pitches - Market traders and pop-ups with a weekly schedule of locations - Mobile services generally: barbers, bike repair, record fairs - anything with a where-are-we-today question - Restaurants and bars that want a menu board and catering page with real personality - Learning MotionPathPlugin: a real, content-driven example of driving an element along an SVG path ## How It Works ### Structure One script initialises each section inside a single gsap.context with gsap.matchMedia, keyed only on reduced motion so exactly one branch runs on every device. Every querySelector is guarded, so any section - the menu, the whole route map, the community gallery - can be deleted and the rest keeps working. Reveal start states are double-gated behind a has-js class and the motion media query, so a blocked CDN or a reduced-motion preference both leave a complete static page. ### The route map The map is hand-authored SVG: one route path snaking through the streets, seven pin groups whose tips sit on it, and the van as a group whose local origin rides the path. At init the script measures each pin's progress along the route by sampling the path for the nearest point, so pins and path can be edited independently. The day picker is a radiogroup with roving tabindex; arrow keys, Home and End move both focus and selection, and clicking a pin selects its day directly. ### The drive Selecting a day tweens the van with MotionPathPlugin from its current progress to the target pin's, autoRotate keeping it on the road's heading, with duration proportional to the distance. An onUpdate callback flips the body vertically past 90 degrees so the van stays wheels-down and reads as facing the way it travels. The wheels spin by the actual arc length over their radius, a dash-offset tween highlights the travelled route in red, and arrival pops the pin with an elastic scale, puffs two exhaust clouds, reveals the pin's photo popover, and fades in that day's pitch card. ### The pitch photos Each day's photo lives in the pitch list as an ordinary img, which is the accessible record. At init the script clones those photos into paper-framed popovers positioned over the map from each pin's coordinates, clamped so edge pins stay inside the panel and flipped below pins near the top. Hovering a pin previews its popover, selection keeps one open, and because the popovers are built from the list, editing a pitch's photo updates both places at once. ### Accessibility and reduced motion Under reduced motion the picker keeps working - it is a control, not decoration - but the van is placed at the selected pin instantly, with its heading read from the path tangent, the route to it highlights statically, and the pitch photo appears without animation. Lenis is never created when reduced motion is on. The map SVG and its popover layer are aria-hidden because everything they show is also in the pitch list; focus rings flip from cream to smoke on light surfaces. ### Without JavaScript The pitch list is authored as a plain ordered list of all seven days, each with its location photo, and the script is what collapses it into a single card, so with JavaScript off the whole week reads in order with its pictures. The van sits parked at the yard where the markup puts it, the marquee stands still, and every section is ordinary readable markup. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start 1. Copy the whole folder to your web host (or open `index.html` locally). 2. Replace the truck name, dishes, prices and pitches: search `index.html` for "Patty Wagon", the `£` amounts, and the seven `
  • ` entries. 3. Point the booking and contact links at your own inbox: search for `@pattywagon.co.uk`. 4. Swap the photos in `assets/img/` for your own (details below). The page keeps working as you cut it down: every section (`#menu`, `#where`, `#scene`, `#catering`, `#follow`) can be deleted wholesale and the script skips what it can't find. ### Accessibility - **Keyboard**: the day picker is a radiogroup with roving tabindex and arrow-key/Home/End support; every interactive element is a real `