# Creative Portfolio Template

> A complete one-page studio portfolio built from GSAP Vault effects: split-text hero, client logo marquee, stagger grid work section, pinned horizontal case studies, count-up stats, and magnetic buttons.

Canonical: https://gsapvault.com/templates/creative-portfolio-template
Live demo: https://gsapvault.com/demos/creative-portfolio-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | beginner |
| Plugins | ScrollTrigger, SplitText |
| Techniques | text-animation, stagger, horizontal-scroll, pinning, scrub, infinite-loop, count-up, hover-effect, scroll-reveal |
| Uses Lenis | Yes |

## Overview

A production-ready one-page portfolio template for studios, freelancers, and agencies, with six GSAP Vault effects composed into a site with a real art direction: a Klein blue hero slab, editorial serif typography, and poster-style project artwork. The hero headline reveals with masked SplitText characters, a seamless marquee loops six placeholder client logos, project cards stagger in with a clip reveal, case studies pin into a horizontal scroll, stats count up on entry, and every call to action is magnetic. Swap the placeholder text, logos, and artwork for your own content and deploy anywhere as static files.

## Features

- Complete deployable one-page site: nav, hero, work grid, case studies, stats, studio, and contact sections
- Masked SplitText hero reveal with staggered character rise
- Seamless client logo marquee with six styled placeholder wordmarks, adjustable speed and direction
- Grid-aware stagger reveal on the project cards with clip-path wipe
- Pinned horizontal case-study scroll with scrub progress bar and keyboard support
- Count-up stats with locale-aware formatting, prefixes, and suffixes
- Magnetic buttons and links driven by gsap.quickTo
- Lenis smooth scrolling wired in and fully optional
- Accessible: reduced motion gets a complete static page, focus mirrors hover throughout

## Use Cases

- Freelance designer or developer portfolios that need to stand out
- Small studio and agency sites with case-study storytelling
- Photographer and creative director showcases
- A launch-ready starting point for client portfolio projects
- Learning how GSAP Vault effects compose into a full page

## How It Works

One script initialises each section inside a single gsap.context with gsap.matchMedia. The hero uses SplitText with masked characters animated by yPercent, the marquee loops a duplicated track with a repeating xPercent tween, and the work grid staggers items with GSAP's grid-aware stagger. The case-study section pins with ScrollTrigger and scrubs the track by its measured scrollWidth, the stats animate a proxy object with snapped values, and magnetic elements use gsap.quickTo setters updated from mousemove. A prefers-reduced-motion branch renders the whole page static, including stacking the horizontal panels vertically.

## 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. Open `index.html` in a browser.** The template is fully self-contained; GSAP, SplitText, and Lenis load from CDN.

**2. Make it yours:**

- Replace the text content in `index.html` (studio name, projects, stats, contact details)
- Swap the placeholder client logos: the `.client-logo` spans in the marquee are styled text wordmarks. Replace them with your clients' names, or drop in `<img>`/inline SVG logos (keep both `.marquee-group` copies identical so the loop stays seamless)
- Swap the poster placeholder artwork: the `.poster--klein`, `.poster--clay`, `.poster--moss`, `.poster--ink`, `.poster--stone`, and `.poster--bone` figures are stand-ins. Replace them with `background-image` or drop `<img>` tags inside the `.work-thumb` / `.panel-visual` elements
- Change the palette by editing the custom properties at the top of `assets/style.css`: `--klein` (the hero slab and accent), `--ink`, `--bone`, plus the poster colours `--clay`, `--moss`, `--stone`

**3. Deploy.** Static files, no build step. Any host works: Netlify, Vercel, GitHub Pages, or a plain server. For production, swap `script.js` for `script.min.js` in `index.html`.

### Accessibility

- **Reduced motion**: `prefers-reduced-motion: reduce` renders the entire page static; the horizontal case-study section stacks vertically, stats show final values, and all content is immediately visible
- **Keyboard navigation**: focus mirrors hover on nav links, buttons, and cards; tabbing through case-study panels scrolls the pinned section to keep focus visible
- **Semantic HTML**: nav/main/section/article/footer landmarks, real `<a>` elements for all interactions
- **Screen readers**: the duplicated marquee copy is `aria-hidden`, placeholder artwork carries `role="img"` labels

### Dependencies

**Required:**
- GSAP 3.12+
- ScrollTrigger plugin
- SplitText plugin

**Optional:**
- Lenis (smooth scroll, included by default)

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/script.min.js`: minified production build
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Creative Portfolio Template](https://gsapvault.com/templates/creative-portfolio-template)
- [All-Access Bundle (£29 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt