GSAP Web Elements
A production-ready component library extracted from GSAP's homepage. Copy, paste, customize — no build tools required.
Full Sections
![]()
Animate
anything.
{ GSAP Animation Library }
alt="" style="width:100%;height:100%;object-fit:cover;" />
Full Section
Hero — "Animate Anything"
Full hero with text split animation, SVG decorations (flower, squiggle, bolt), gradient text, and CTA.
heroscrolltriggersvgsplittext
alt="" style="width:100%;height:100%;object-fit:cover;" />
Full Section
Intro — "Why GSAP"
Intro with SVG line-drawing animation, animated highlight, word stagger, and decorative flower reveal.
introsvg-drawscrolltrigger
![]()
Animate
Easy
Add
Super
alt="" style="width:100%;height:100%;object-fit:cover;" />
Full Section
Animate — Horizontal Scroll
Demo section with GSAP horizontal scroll, text choreography, icon animations, containerAnimation.
animatehorizontal-scrollcontainer-animation
alt="" style="width:100%;height:100%;object-fit:cover;" />
Full Section
Tools — SVG Showcase
Tools section with SVG morph animations, scroll-triggered reveals, and plugin demo cards.
toolsmorphsvgscrolltrigger
Individual Components
alt="" style="width:100%;height:100%;object-fit:cover;" />
Navigation
GSAP Navbar
Responsive nav bar with GSAP branding, menu links, and pill CTA button with hover effect.
navresponsive
![]()
Animate
Easy
Add
Super
alt="" style="width:100%;height:100%;object-fit:cover;" />
Text Effect
"Animate Anything" Text Split
Split text with per-word clip reveal, staggered timeline, and GSAP power3 easing sequencing.
clip-pathgsap.timelinestagger
alt="" style="width:100%;height:100%;object-fit:cover;" />
SVG Decoration
Flower / Star SVG
SVG with stroke line-drawing animation, flower petals reveal, and GSAP scrub effect.
svgstroke-dashoffsetscrolltrigger
alt="" style="width:100%;height:100%;object-fit:cover;" />
SVG Decoration
3D Squiggle / Spring
Metallic purple spiral SVG shape with continuous rotation and subtle float animation.
svgrotatefloat
alt="" style="width:100%;height:100%;object-fit:cover;" />
SVG Icon
Lightning Bolt
Green neon lightning bolt SVG with subtle pulse/flicker animation on loop.
svgpulseneon
![]()
focus on the fun stuff
alt="" style="width:100%;height:100%;object-fit:cover;" />
Text Effect
Gradient Text Highlight
Text with inline SVG mask creating green-to-cyan gradient highlight on specific words.
svg-maskgradient
![]()
fun
stuff
alt="" style="width:100%;height:100%;object-fit:cover;" />
Text Effect
Word Bounce / Scatter
Per-character animation where words bounce into position with staggered ease. Great for headlines.
bouncestaggergsap.timeline
![]()
alt="" style="width:100%;height:100%;object-fit:cover;" />
Button
Get GSAP Button
Pill-shaped CTA button with border animation, hover flair effect, and arrow icon.
buttonhoverpill
![]()
focus on the fun stuff
alt="" style="width:100%;height:100%;object-fit:cover;" />
Typography
Curly Brace Wrappers
Text wrapped in animated curly braces with decorative SVG path drawing animation.
svgtypography
![]()
Animate
Easy
Add
Super
alt="" style="width:100%;height:100%;object-fit:cover;" />
Text Effect
Scroll-Reveal Subtitle
Subtitle text that reveals on scroll with left-to-right clip-path animation.
scrolltriggerclip-path
alt="" style="width:100%;height:100%;object-fit:cover;" />
SVG Icon
Diamond / Asterisk SVG
Decorative diamond/asterisk SVG shape with continuous rotation animation.
svgrotatedecorative
alt="" style="width:100%;height:100%;object-fit:cover;" />
Decorations
Floating Shape Cluster
Multiple decorative shapes (sphere, ring, diamond, starburst) with independent float animations.
svgfloatcluster
![]()
Animate
Easy
Add
Super
alt="" style="width:100%;height:100%;object-fit:cover;" />
Text Effect
Horizontal Text Track
Long horizontal text strip that scrolls vertically via ScrollTrigger containerAnimation.
horizontalcontainer-animationscroll
![]()
focus on the fun stuff
alt="" style="width:100%;height:100%;object-fit:cover;" />
Typography
Brace-Wrapped Description
Large descriptive text wrapped in animated curly braces — common GSAP pattern for section intros.
typographybracedescription
alt="" style="width:100%;height:100%;object-fit:cover;" />
CSS / 3D
3D Glow Sphere
CSS gradient sphere with neon glow effect and subtle breathing scale animation.
cssglowgradient
Getting Started
Each component is self-contained. Copy the HTML, include the CSS class, add GSAP from CDN, and call the animation function.
// 1. Include GSAP (free core + ScrollTrigger)
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
// 2. Register ScrollTrigger
gsap.registerPlugin(ScrollTrigger);
// 3. Initialize animations
// (each component has its own JS snippet — see component files)
Premium features (SplitText, MorphSVGPlugin, DrawSVGPlugin, MotionPathPlugin) require GSAP Club →