GSAP Examples
Explore immersive motion studies and interactive examples built with GSAP.
Motion Studies
Ten immersive experiments. Scroll, explore, and play with the details.
Elsewhere in Motion
An editorial photography gallery with pinned horizontal travel and layered image parallax.
The Bigger Picture
A scroll-controlled Flip mosaic that opens into a full-screen photograph.
Type in Motion
Three replayable typography studies: masked word reveals, 3D cascades, and scattered characters.
Orbital Object
A layered 3D sculpture with responsive pointer depth and keyboard rotation.
Motion Score
Conduct a four-chapter timeline with playback, scrubbing, speed controls, and label seeking.
In Good Company
Perspective card entrances, elastic charts, orbital diagrams, and pointer-following highlights.
Sound, Visualized
Explore a visual song structure with a scrubbed waveform, playhead, and chapter navigation.
Behind the Record
A cinematic vinyl reveal with a rotating record, dimensional sleeve, and staggered tracklist.
Frame by Frame
A scroll-controlled canvas product study with progressive frame loading.
A Little More Feeling
An interactive easing studio with four motion styles, duration control, and replay.
Service Industries
Professional landing pages for various service businesses
Restaurant Menu
Restaurant landing page with animated menu sections and category navigation
Medical Services
Healthcare provider page with services grid and appointment booking
Law Firm
Legal services landing page with practice areas and attorney profiles
Real Estate
Property listings with parallax images and search functionality
Fitness Gym
Gym landing page with class schedule and membership tiers
Salon & Spa
Beauty services page with service menu and booking options
Auto Dealership
Car dealership with vehicle showcase and specs reveal
Travel Agency
Travel destinations with parallax cards and booking CTAs
Online Learning
E-learning platform with course cards and progress tracking
Pet Services
Pet care landing page with services and testimonials
Photography Studio
Photography portfolio with masonry grid and pricing packages
Architecture Firm
Architecture portfolio with blueprint grid and project showcase
Consulting Firm
Business consulting with expertise areas and case studies
Event Planning
Event planning services with gallery and process steps
Construction Company
Construction services with project portfolio and stats
Nonprofit Charity
Charity organization with impact metrics and donation progress
Insurance Services
Insurance provider with coverage options and quote form
Financial Services
Wealth management with animated charts and service cards
Home Services
Home maintenance services with pricing and emergency banner
Tech Services
IT solutions with terminal animations and tech stack marquee
Music Industry
ScrollTrigger animations for musicians, artists, and labels
Tour Dates Timeline
Vertical timeline with dates pinned, cities animate in from alternating sides with progress indicator
Artist Stats Counter
Monthly listeners, streams, followers counting up as section enters view
Discography Carousel
Horizontal scroll through albums with parallax cover art and track previews
Music Video Showcase
Pinned video player with rotating text descriptions, progress synced to scroll
Marketing & Brand
Conversion-focused animations for marketing professionals
Testimonial Carousel
Pinned section with testimonial cards swapping, avatar and quote transitions
Pricing Table Comparison
Sticky header with pricing tiers, features highlighting as you scroll
Brand Story Scroll
Narrative sections with parallax images, text reveals, and chapter markers
Case Study Cards
Cards expand on scroll to reveal full case study, shrink as you leave
CTA Reveal Section
Dramatic headline reveal, button pulse, and background gradient shift for conversions
ScrollTrigger
Scroll-driven animations with pinning, scrubbing, and progress tracking
Sticky Scroll Section
Sticky text section with pinned left column and scroll-triggered content animations on the right
Scroll Page Sections
Complete landing page with multiple scroll-triggered animations and sections
Slides Pinning
Full-screen slide transitions with pinned sections and smooth overscroll effects
Lateral Pin with Progress
Pinned section with animated list highlighting and image slides synchronized with scroll progress
ScrollSmoother
Smooth scrolling with parallax effects using data-speed attributes and ScrollTrigger pinning
Core GSAP
Fundamental tweens, timelines, and animation techniques
Draggable & Interactive
Drag interactions, snap points, and user-controlled animations
DevTools & Debug
GSDevTools for debugging and visualizing animation sequences
