Creative Portfolio Template 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.
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. 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
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.