GSAP Examples
Explore interactive examples organized by GSAP plugin type
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
Album Release Hero
Full-screen album cover that scales down on scroll, revealing tracklist with staggered animations
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
Waveform Visualizer
SVG waveform that draws and animates as you scroll through song sections
Marketing & Brand
Conversion-focused animations for marketing professionals
Feature Reveal Grid
Bento grid where each cell reveals on scroll with different entrance directions
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
Scrubbed Image Bento
Scrubbed image bento grid with Flip transitions zoomed to text content
Lateral Pin with Progress
Pinned section with animated list highlighting and image slides synchronized with scroll progress
Horizontal Gallery
Horizontal scrolling image gallery with scroll-driven navigation
Image Sequence Scroll
Frame-by-frame image sequence animation controlled by scroll position
ScrollSmoother
Smooth scrolling with parallax effects using data-speed attributes and ScrollTrigger pinning
Text Animations
SplitText and TextPlugin for character, word, and line animations
Core GSAP
Fundamental tweens, timelines, and animation techniques
GSAP Starter
Basic GSAP tweens and timelines - a great starting point for learning GSAP fundamentals
Timeline Labels
Learn how to use labels in GSAP timelines for precise control over animation sequencing
3D Logo Hover Animation
Interactive 3D card effect with perspective transforms and parallax movement that responds to mouse position
AI Card Generator
Interactive AI-themed card component with animated effects
Draggable & Interactive
Drag interactions, snap points, and user-controlled animations
DevTools & Debug
GSDevTools for debugging and visualizing animation sequences
