A comprehensive collection of GSAP (GreenSock Animation Platform) examples implemented across three different frontend frameworks: Vanilla HTML/JS, React, and Vue.js.

Experience the power of GSAP animations with these stunning live demonstrations:

An elegant portfolio showcase featuring:

• Smooth scroll animations with ScrollTrigger
• Interactive hover effects and micro-interactions
• Timeline-based sequences for seamless page transitions
• Parallax scrolling effects for depth and immersion
• Text reveal animations with staggered character effects
• Image galleries with smooth transitions and filters

A sophisticated product presentation demonstrating:

• Complex animation sequences with coordinated timelines
• SVG path animations and morphing effects
• Scroll-triggered reveals for content sections
• Interactive product demonstrations with real-time feedback
• Video integration with synchronized animations
• Mobile-responsive animations optimized for all devices

Both demos showcase advanced GSAP techniques including ScrollTrigger, Timeline management, and performance optimization for production-ready applications.

This project demonstrates how to implement the same GSAP animations using different frontend frameworks, showcasing best practices and framework-specific patterns for each approach.

awesome-gsap/
├── html/                 # Vanilla HTML/CSS/JavaScript examples
├── react/                # React-based GSAP examples
├── vue/                  # Vue.js-based GSAP examples
└── README.md            # This file

Each framework implementation includes the following GSAP animation examples:

• Simple Tweens - Basic property animations (position, scale, rotation)
• Timeline Sequences - Coordinated animation sequences
• Easing Functions - Various easing and timing demonstrations

• ScrollTrigger - Scroll-based animations and parallax effects
• Morphing & Paths - SVG path morphing and drawing animations
• Physics Animations - Realistic physics-based movements
• Interactive Animations - Mouse/touch-triggered animations
• Complex Sequences - Multi-element choreographed animations

• Text Animations - Character and word-level text effects
• Image Effects - Photo galleries and image transitions
• Loading Animations - Creative loading indicators
• Navigation Animations - Animated menus and transitions

• Node.js (v16 or higher)
• npm or yarn package manager

1. Clone the repository

   git clone <repository-url>
   cd awesome-gsap

2. Choose your framework and follow the specific setup instructions:

   • HTML/Vanilla JS: Navigate to html/ directory and open index.html in your browser
   • React (Next.js): Navigate to react/ directory and run npm install && npm run dev (opens on http://localhost:3000)
   • Vue 3: Navigate to vue/ directory and run npm install && npm run dev (opens on http://localhost:5173)

3. System Requirements:

   • HTML: Any modern web browser
   • React: Node.js 18+
   • Vue: Node.js 22+ (required for latest Vite compatibility)

Each framework directory contains its own README with detailed setup instructions and framework-specific considerations:

• HTML/Vanilla JS Documentation
• React Documentation
• Vue.js Documentation

• Core GSAP Library - Basic tweening and timeline functionality
• ScrollTrigger Plugin - Scroll-based animations
• MotionPath Plugin - Path-following animations
• TextPlugin - Text animation effects
• MorphSVG Plugin - SVG morphing (requires GSAP membership)
• Physics2D Plugin - Physics-based animations (requires GSAP membership)

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

This project is licensed under the MIT License - see the LICENSE file for details.

• GreenSock (GSAP) for the amazing animation library
• The frontend community for framework-specific best practices
• Contributors and maintainers of React and Vue.js

这个项目已经配置好了 Vercel 部署，可以一键部署到 Vercel 平台：

# 安装 Vercel CLI
npm i -g vercel

# 登录并部署
vercel login
vercel --prod

部署后可以通过以下路径访问：

• /folio - Folio 创意作品集演示
• /honor - Honor 产品展示演示
• / - 主页导航
• /html - HTML 项目
• /react - React 项目
• /vue - Vue 项目

详细部署说明请查看 DEPLOY_TO_VERCEL.md

If you have any questions or need help with the examples, please open an issue in the repository.

Happy Animating! 🎬✨