GSAP Portfolio
Animated portfolio with GSAP scroll-triggered reveals, smooth transitions, and performance-optimised animations.
A personal portfolio built to push the boundaries of scroll-based animation on the web. Every section reveal, page transition, and micro-interaction is orchestrated with GSAP's ScrollTrigger and timeline API. The result is a cinematic browsing experience that feels fluid on both desktop and mobile, while maintaining sub-second load times thanks to Vite's build optimisation.
React + Vite + GSAP
Scroll-Driven Animation Portfolio.
A React SPA powered by Vite with GSAP ScrollTrigger handling all scroll-based animations, timeline sequencing, and page transitions for a cinematic portfolio experience.
Project Overview
Cinematic scroll experiences without sacrificing performance.
This portfolio was an exploration of how far GSAP ScrollTrigger can be pushed while keeping the experience performant on mid-range devices. Each project card animates in with staggered reveals, text splits character-by-character on scroll, and section backgrounds parallax smoothly as the user navigates. Page transitions use GSAP timelines to crossfade between routes without a full page reload. Built with React and bundled with Vite for instant HMR during development and optimised production builds. Live at gsap-portfolio-rouge.vercel.app.
GSAP ScrollTrigger: Synchronizing Animations with Page Position
Timeline-based animation tied to scroll position.
GSAP's ScrollTrigger plugin opens up animation possibilities that were previously impossible in vanilla JavaScript. Traditional CSS animations trigger at specific viewport positions, but ScrollTrigger links animations directly to scroll position — scroll faster and the animation plays faster, scroll backwards and the animation reverses. This creates the illusion that animated elements are physically attached to the scroll position. The GSAP portfolio leverages this for staggered project card reveals: as you scroll to a new project section, cards enter one by one with offset timing, creating a cascading entrance effect. Text content splits into individual characters and animates in with letter-by-letter reveal effects timed to scroll progress. Parallax sections move at different speeds relative to scroll, creating depth perception as you navigate.
The technical implementation uses GSAP timelines — sequences of tweens that play in sync. Each project card has a timeline with character-split animations, position tweens, and opacity changes. ScrollTrigger maps the timeline's progress (0 to 1) to the scroll position within a trigger zone. Setting scrub:1 makes the timeline scrub-able by scroll, meaning dragging the scrollbar directly controls animation playback. This feel of control makes the experience feel responsive and physical. For performance, the portfolio uses will-change CSS hints on animated elements and GPU-acceleration through transform animations instead of position changes, ensuring 60fps animation even on older devices.
Character-by-Character Text Animations
Revealing text with typographic precision.
One of GSAP's utilities, SplitText, breaks text into individual characters, words, or lines that can be animated independently. The GSAP portfolio uses this to split project titles and descriptions into characters, then animates each character with a staggered reveal effect — the first character opacity tweens from 0 to 1, then the second character follows with a delay, creating a cascading type effect. Combined with ScrollTrigger, this animation plays as the user scrolls to each project section, making the reading experience feel deliberate and cinematic. Different projects might use different reveal patterns: some use horizontal slide-in, some use vertical rise with stagger, some use fade with scale.
Page Transitions and Client-Side Routing
Seamless navigation without page reloads.
Traditional routing in SPAs typically shows a loading state or flashes white as the page transitions. The GSAP portfolio uses GSAP timeline animations for page transitions, creating smooth crossfade effects between routes. When a user clicks a project link, the current page content fades out while the new page content fades in and animates from the sides. This transition happens client-side without a full page reload, keeping the experience seamless. React Router handles the actual routing, while GSAP orchestrates the visual transition. The animation duration is short (300-400ms) to feel snappy while still conveying that something changed.
The technical implementation uses GSAP's useGSAP hook (when available) or manually managed effect cleanup to trigger animations on route changes. Layout animations ensure that even if page structure differs slightly, the visual transition feels smooth. This approach is particularly effective for portfolios where visitors navigate through projects — each transition feels intentional and polished rather than jarring. The result is a browsing experience that feels like a designed product rather than a generic website.
Performance Optimization for Scroll Animations
Keeping 60fps animation on all devices.
Scroll-triggered animations can be expensive computationally — every frame of scroll triggers animation updates, which can cause jank on lower-end devices. The GSAP portfolio optimizes for performance through several techniques: using GPU-accelerated properties (transform, opacity) instead of layout-causing properties (top, left); implementing will-change CSS hints to prepare the browser for animated elements; lazy-loading GSAP and ScrollTrigger with code splitting; and using requestAnimationFrame throttling to prevent animation updates from outpacing the refresh rate. During development, Chrome DevTools Performance profiling identifies where time is being spent and optimizations are verified by checking that frame rates stay above 50fps on target devices.
Building Competitive Portfolio Projects
Standing out in the developer job market.
A portfolio that showcases vanilla JavaScript animations is common. A portfolio that combines smooth GSAP scroll animations, optimized for performance across devices, tells a different story. It demonstrates that the creator understands not just how to implement animations but how to balance visual appeal with technical performance. Hiring managers recognize the difference. When reviewing portfolios, they ask: "Does this site feel good to use across all devices?" "Can I see evidence of performance optimization?" "Are animations enhancing user experience or just showing off?" A portfolio that passes all three tests demonstrates professional discipline that goes beyond technical capability.
For a 10+ year experienced full-stack designer like Aiden, the GSAP portfolio serves a specific purpose: demonstrating expertise in animation and interaction design using modern tools. It's not just a project showcase — it's proof of mastery. The fact that it loads fast despite complex animations, the attention to detail in interaction feedback, the thoughtful use of motion to guide attention — these details signal to potential employers and clients that this is work worth paying for. This positioning is especially valuable on the Gold Coast, where design and development talent is in demand and differentiation through demonstrated expertise commands premium rates.
React Ecosystem and Component Composition
Keeping animated code modular and maintainable.
Scroll-triggered animations can quickly become spaghetti code if not carefully structured. The GSAP portfolio uses React components to keep animation logic modular: a ScrollTrigger component wraps GSAP instance creation and cleanup, an AnimatedText component handles text splitting and character animation, a ParallaxSection component manages parallax effects. Each component encapsulates its animation logic, making the site maintainable and new features easy to add. A team member can understand how a component works without understanding the entire animation system. Testing becomes possible because animations are tied to component state and props rather than being implicit side effects. This architectural discipline is the difference between demo code that works once and production code that can be maintained and extended over months or years.
The Future of Animation on the Web
Where web animation technology is headed.
GSAP has dominated web animation for over a decade, but emerging technologies promise even more powerful capabilities. The Web Animations API (native browser animation API) continues to improve, potentially reducing the need for external libraries. View Transitions API (experimental) enables smooth transitions between pages without JavaScript. Popover API enables persistent overlays without complex state management. Server-side runtimes like Deno and fresh frameworks like SvelteKit and Astro are shifting animation considerations toward the server. Regardless of tooling shifts, the principles demonstrated in the GSAP portfolio remain relevant: thoughtful orchestration of animation to enhance UX, performance optimization to maintain smooth motion, and component-based architecture for maintainability.
For experienced developers like Aiden, understanding animation principles across multiple tools and platforms is valuable. Tomorrow's portfolio might use Web Animations API instead of GSAP, or Svelte transitions instead of React hooks, but the ability to create smooth, purposeful motion that enhances user experience is timeless. The GSAP portfolio serves as proof that this capability is in the skillset, and that it's applied with professional discipline rather than flashiness.