Brent Haskins / Applied AI
Portfolio motion should respect reduced motion by default
Scroll-driven galleries impress in demos and alienate users with vestibular sensitivity. Brent Haskins built his portfolio with GSAP ScrollTrigger and Lenis smooth scroll on wide viewports, degrading to a static list when prefers-reduced-motion is set or on narrow screens.
Your portfolio is not a conference reel. It is read by hiring managers on a phone in bright sunlight and by users who enabled Reduce Motion years ago.
I designed brenthaskins.com to show craft without requiring tolerance for scroll theater.
Progressive enhancement
Desktop-wide layouts get the staged project index: perspective, pinned panels, scroll- linked emphasis. It demonstrates GSAP literacy for roles that care.
Mobile and prefers-reduced-motion: reduce get a vertical list—same content, no ScrollTrigger dependency. The work is still there; only the spectacle drops.
Lenis only when it helps
Smooth scroll syncs with GSAP’s ticker when enabled. When reduced motion is on, skip Lenis entirely—native scroll is correct accessibility-wise and simpler to debug.
Performance is part of the message
Heavy motion on huge images signals you will ship bloated marketing sites. Optimize images, limit simultaneous tweens, and kill animations on tab hide if you add sound or continuous loops elsewhere.
Case studies stay calm
Project pages under /projects/[slug] are readable narratives—gallery, stack, story.
The index sells personality; case studies sell judgment.
Takeaway for builders
If motion is the first thing recruiters mention, also ask what happens at 520px width and with reduced motion on. Brent Haskins — portfolio, blog.
Motion should answer “can this person ship considerate UI?” not “can this person win awards?”
FAQ
Questions people ask about this topic.
How should developer portfolios handle animation?
Treat motion as progressive enhancement. Provide a fully usable layout without scroll hijacking or pinned sections. Detect prefers-reduced-motion and skip smooth scroll libraries. On small screens, favor readable stacks over miniature scroll scenes. Performance and accessibility are part of craft—not opposites.
What stack powers motion on brenthaskins.com?
The site uses GSAP with ScrollTrigger for the featured work sequence, Lenis for smooth scrolling on qualifying viewports, and disables both when reduced motion is requested or below roughly 520px width. Next.js Image handles gallery assets. Brent Haskins documents engineering choices on the site blog.
Sources