026
Optional AI setup

Food Truck Template

£10

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.

ScrollTriggerMotionPathPlugin Lenis intermediate
7 more details
motion-pathsvg-animationscroll-revealstaggerinfinite-loopkeyboard-navigationhover-effect
Food Truck Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab
Open Food Truck Template demo in new tab

About this template

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.

Read the full template overview

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: move a pin or redraw the route and nothing else needs changing.

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.

What's included

13 items
  • 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

Perfect for

5 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

6 sections

Structure

One script initialises each section with a single setup and teardown path and one motion branch, 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.

Plugins ScrollTrigger, MotionPathPlugin
Difficulty Intermediate
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Questions about this template

How do I change the route and pitches to my own city?

You redraw the SVG route and move the pins. Pins are located along the route at runtime by nearest-point measurement, so moving a pitch or redrawing the road still lands the drive correctly without you retiming the animation. It is illustration work rather than code work.

Does the map need Google Maps or an API key?

No. It is an illustrated SVG map with no third-party service, no key and no usage billing, and the van is driven along it with MotionPathPlugin. That also means it keeps working offline and cannot break when a maps API changes its pricing.

Do touch users miss out on the pitch photos?

No. Hovering a pin previews the photo on the map, but every pitch card below repeats it as real content, so the photograph is reachable without a hover. Selecting a day also reveals it on arrival.

What if my pitches change week to week?

You edit the page, since there is no backend or schedule feed. Seven days are built in as a radiogroup. If your locations genuinely change every week this becomes a weekly editing chore, which is worth weighing before you buy.

Seventeen photographs sounds heavy. What does it weigh?

About 1.3MB for the whole set, bundled as WebP baked to one bright warm grade, with alt text, dimensions and a colour fallback on every image. The single grade is what stops a mixed set of phone photos looking like a stock collage.

Paid template

Purchase to unlock the code.

Buying Food Truck Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

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 <li class="pitch"> 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.

Files

Code snippet omitted: it ships with the download.

The route map

Three things make the map, all in index.html:

  • The route: one SVG path (data-route-path) snaking through the streets, drawn twice: a dotted smoke base and a red data-route-trace copy that highlights the travelled part.
  • The pins: seven <g class="map-pin"> groups, one per day, each carrying data-pin, data-x and data-y. The tip of each pin should sit on the route. Each group also holds an invisible .pin-hit circle so hovers land without pixel-hunting.
  • The van: a <g data-truck> group whose local origin rides the path. The markup parks it at the yard, which is where it sits without JavaScript.

The van finds its own way. At load, the script measures where each pin sits along the route by sampling the path for the nearest point. So to move a pitch: drag its pin coordinates (data-x/data-y and the translate(...) to match), make sure the route passes nearby, and you're done; no progress values to keep in sync. To redraw the route entirely, edit the two d attributes (keep them identical) and the pins will re-measure against it.

The order of the week is the order of the day-picker buttons, and the drive passes through intermediate stops the way a real van would. Duration scales with distance (0.85–3.4s), in drive() in script.js.

The pitch photos live in the list, not the map. Each <li class="pitch"> starts with a .pitch-photo image; that is the accessible record and what no-JS visitors see. At load the script clones those images into paper-framed popovers over the map, one per pin, positioned from the pin's data-x/data-y (clamped at the edges; pins in the top third open downward). Hover a pin to preview its photo, select a day to keep one open, tap or click a pin to select that day. Change a photo in the list and the map follows; there is nothing to edit twice.

The map is a picture, not the record. It's aria-hidden, popovers included; the pitch list below carries all the information. Editing a pitch means editing its <li class="pitch">: photo, day, place, hours, note, plus the data-short attribute that fills the hero's "Today ▸" chip.

To relabel the city, edit the <text class="m-label"> elements and the block/park/water shapes; they're ordinary SVG rectangles and paths in a 900×620 viewBox.

The picker is a real radiogroup: click or tap any day, or focus it and use the arrow keys, Home and End. The default selected day is the real current weekday.

Per-section options

  • Hero: the photo panel shows two crops of the same image: hero.webp wide on desktop, hero-tight.webp under 720px (the <source> in the <picture>). The caption sits on a gradient scrim; if you swap the photo, keep the caption inside the darkest band or re-measure the contrast (see the stylesheet header). The "Today ▸" chip fills itself from the pitch list; with JavaScript off it reads as a link to the map.
  • Marquee: the mustard strip between hero and menu. Edit the sentence in both .marquee-run spans (they must match; the pair is what makes the loop seamless). Delete the whole .marquee div freely.
  • Menu: each dish is a .board-item with a dotted leader between name and price. The v badge is a .board-tag span; copy it for gf/vg/anything. Columns are just two .board-col divs.
  • Where: see above.
  • The scene: a lead photo spanning the grid plus three tiles, each a .scene-photo figure with a mono caption. Add or remove tiles freely; the grid reflows. This is the section that shows the crowd, so keep it people-first when you swap images.
  • Catering: bullet list, price line and a mailto: CTA. No form by design: trucks triage by email.
  • Follow: the handle is the hero of the section; the chips are plain links.

Photography

The images are bundled, optimised WebP derivatives: Unsplash sources with this template's bright, warm grade baked into the pixels (saturation lifted, hue nudged toward red, per-image brightness matched so mixed sources read as one sunny campaign). They are not the original files and should not be treated as a photo library.

To swap in your own photos, just replace the files in assets/img/ (same names), or change the <img> tags. A background-color sits behind every photo, so a missing image never leaves a hole. The hero and the Monday yard.webp tile are crops of the same source on purpose: they read as the same van. Keep that continuity if you can, since the map photos claim to be your pitches.

To re-run the grade (GSAP Vault repo tooling): edit assets/img-manifest.json (source URL, crop, size, per-image brightness) and run:

Code snippet omitted: it ships with the download.

Image credits (Unsplash sources)

Palette

There is deliberately no palette switcher: the chilli red is the identity. A reskin is still a small edit, because every colour on the page resolves from these tokens (plus their RGB triples, which feed every translucent value) at the top of assets/style.css:

Code snippet omitted: it ships with the download.

Change a hex and its triple together (--red-deep, --smoke-lift and --block are the same colours pushed a step; move them with their parents). The stylesheet header records the measured contrast of every pair as used, including the hero caption composited over the baked photo; re-measure yours against those floors before shipping, especially the two standing bans: dimmed cream never carries text on the red ground, and mustard is never text on red.

Accessibility

  • Keyboard: the day picker is a radiogroup with roving tabindex and arrow-key/Home/End support; every interactive element is a real <button> or <a>; focus rings are always visible and flip colour per surface. Pin hover is a preview only; everything it shows is reachable through the picker and the pitch card.
  • Reduced motion: honoured twice: a CSS media query removes all reveal start states and stops the marquee, and the script's matchMedia reduce branch places the van at the selected pin instantly (heading read from the path tangent), highlights the route statically, shows the pitch photo without animation, and never creates Lenis. The picker stays fully functional.
  • No JavaScript: the whole page reads. All seven days' pitches render as a plain ordered list with their photos, the van sits parked at the yard, and the hero chip links to the map section. The map popovers are never created.
  • Screen readers: the map SVG and its popover layer are aria-hidden decoration; the pitch list and picker carry all the information, photos included; the marquee is aria-hidden and repeats nothing that matters.

Dependencies

Loaded from CDN at the end of index.html:

  • GSAP core, ScrollTrigger, MotionPathPlugin (3.15.0)
  • Lenis smooth scroll (1.3.17), optional; delete its tag and the page falls back to native scrolling

Fonts: Shrikhand, Outfit, Ubuntu Mono via Google Fonts.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Related articles

28 new website templates, and an offer: request the next one

28 new GSAP website templates in five days: portfolios, restaurants, gyms and SaaS products. Plus what's coming next and how to request a template.

62 animated website templates built with GSAP (2026)

62 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Four are completely free to download.

Your cart

Your cart is empty

The Vault £99

Every effect, template and UI element: 165 today, plus everything we release next.

Or browse effects, templates or UI elements.