Creative Portfolio Template
£10 Standard License Unlimited projects
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.
About This Template
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.
Read the full template overview
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.
What's Included
- 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
Perfect For
- 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
Structure
One script initialises each section inside a single gsap.context with gsap.matchMedia.
Hero, marquee and grid
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 pinned case study
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.
Reduced motion
A prefers-reduced-motion branch renders the whole page static, including stacking the horizontal panels vertically.
Plugins ScrollTrigger, SplitText
Difficulty Beginner
Smooth Scroll Lenis Integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
Questions about this template
Will this work if I only have three or four projects to show?
Yes, and it is often better that way. The work grid is a plain CSS grid that reflows at any count, and the pinned horizontal case-study section is built per slide, so you delete the slides you do not need. Three strong projects in the case-study rail reads more confident than nine thumbnails.
Do I have to use the client logo marquee?
No. It ships with six placeholder wordmarks because a studio site usually wants social proof there, but the whole strip is one guarded section you can delete without touching anything else. If you keep it, swap the wordmarks for SVGs of real client marks rather than raster logos so they stay crisp.
Can I change the stats, or are they decorative?
They are real numbers you set. Each stat counts up to a value you put in the markup, with locale-aware formatting plus optional prefixes and suffixes, so you can show currency, percentages or a plain project count. If a number would be embarrassing, delete that stat rather than inflating it.
Is the contact section a working form?
No. It is a designed contact section with no backend, because a static template cannot post anywhere on its own. Point it at Formspree, Netlify Forms or your own handler, or replace it with a mailto link and your email address, which is what most freelance portfolios actually want.
Can I use this for a client's site and not just my own?
Yes. The standard licence covers unlimited personal and commercial projects, including client work, with no per-project fee. The only things you cannot do are redistribute the source itself or build a competing template product out of it.
