GSAP&GSapien—for “Humans who Animate”
GSAP&GSapien—for “Humans who Animate”
Interactive Demos
Animation Showcase
Explore the power of GSAP animations with these interactive components. Each demo showcases different animation techniques and capabilities.
Animated Text Reveal
Choose an animation style and replay the reveal to see GSapien in action.
Button morph on hover using GSAP
GSapien is a comprehensive animation library and design system built on top of GSAP (GreenSock Animation Platform). It provides pre-built, customizable animation components that make it easy for developers to create stunning, performant animations without deep GSAP knowledge. Think of it as 'GSAP for Humans' - simplifying complex animations into reusable, beautiful components.
GSapien combines the raw power of GSAP with modern React patterns and beautiful design. It offers: • Pre-built animation components • TypeScript support • Accessibility features • Performance optimizations • Easy customization • Modern design system integration • Cross-browser compatibility • Mobile-responsive animations
GSapien provides a rich set of animation capabilities: • Text reveal animations with multiple variants • Button morphing and interaction effects • Card reveal animations with 10+ variants • Accordion animations with smooth transitions • Grid stagger effects for lists and galleries • Scroll-triggered animations • Hover and interaction animations • Custom easing and timing functions • Responsive animation scaling
Getting started is simple: 1. Install GSapien and its dependencies 2. Import the components you need 3. Customize props and variants 4. Add your content and watch the magic happen! GSapien handles all the complex GSAP configurations behind the scenes, so you can focus on creating beautiful user experiences. Perfect for landing pages, portfolios, dashboards, and any project that needs engaging animations.
Premium Component
Beautiful, accessible, and customizable UI components
Downloads10.2k
Rating4.9/5
Cursor Follower
Interactive cursor following with GSAP animations
Move your cursor over this area
Watch the animated cursor follower in action
Grid Stagger Effects
Staggered grid animations with multiple variants
Grid Stagger Reveal
Modern Card 1
Beautiful, animated, and responsive
Modern Card 2
Beautiful, animated, and responsive
Modern Card 3
Beautiful, animated, and responsive
Modern Card 4
Beautiful, animated, and responsive
