GSAP Logo Animation Template

A production-ready boilerplate for creating logo animations with GSAP (GreenSock Animation Platform) and seamless video export capabilities.

Using This as a Template

This repository is designed to be reused for multiple logo animation projects. See TEMPLATE.md for complete instructions on:

• Creating new projects from this template
• Maintaining connection to template for updates
• Pulling template improvements into existing projects
• Managing project-specific vs template-managed files

Quick Start:

1. Click "Use this template" button on GitHub
2. Name your new project (e.g., your-logo-animation)
3. Clone and add template as upstream remote
4. Customize logo and animation

For detailed workflow, see TEMPLATE.md.

Features

• GSAP (100% Free) - Includes all plugins: DrawSVG, MorphSVG, CustomBounce, SplitText, and more
• Vite - Fast development with hot module replacement
• TailwindCSS v3 - Utility-first CSS framework
• Easy Export - One-command export to video and GIF
• Clean Structure - Simple, modular, and well-documented
• Template Workflow - Reusable for multiple projects with update propagation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• gsap-video-export - Install globally for exporting animations:

  npm install -g gsap-video-export

• FFmpeg - Required for video/GIF generation:

  # macOS
  brew install ffmpeg
  
  # Ubuntu/Debian
  sudo apt install ffmpeg
  
  # Windows (Chocolatey)
  choco install ffmpeg

Quick Start

1. Install Dependencies

npm install
# or
yarn

2. Start Development Server

npm run dev
# or
yarn dev

The dev server runs on http://localhost:5000

3. Customize Your Animation

Edit src/main.js to create your animation:

• Replace public/logo.svg with your logo
• Adjust timeline animations and timing
• Modify colors, easing, and effects

4. Export Your Animation

Important: Keep the dev server running in one terminal, then run export commands in another terminal.

See EXPORT.md for detailed export instructions.

Quick export:

npm run export:video      # Standard resolution
npm run export:video:hd   # 1080p HD
npm run export:video:4k   # 4K resolution
npm run export:gif        # Convert to GIF

Note: Export scripts use http://localhost:5000. If Vite uses a different port, manually run:

gsap-video-export http://localhost:PORT --output ./exports/animation.mp4 --fps 60

Project Structure

.
├── public/
│   └── logo.svg          # Your logo SVG file
├── src/
│   ├── main.js           # Main animation logic
│   └── index.scss        # Styling
├── exports/              # Generated export files (gitignored)
├── index.html            # HTML entry point
├── TEMPLATE.md           # Template usage and workflow guide
├── EXPORT.md             # Detailed export guide
├── CLAUDE.md             # AI assistant context
└── example-export.*      # Example outputs

Available Scripts

Command	Description
npm run dev	Start development server on port 5000
npm run build	Build for production
npm run serve	Preview production build
npm run export:video	Export animation as MP4 (60fps)
npm run export:video:hd	Export as 1080p HD video
npm run export:video:4k	Export as 4K video
npm run export:gif	Convert exported video to optimized GIF

Customization Guide

Replace the Logo

1. Replace public/logo.svg with your logo
2. Ensure your SVG has proper mask IDs for animation
3. Update mask selectors in src/main.js if needed

Adjust Animation Timing

In src/main.js, modify the timeline:

mainTimeline
  .from(element1, {
    drawSVG: 0,
    duration: 2,  // ← Change duration
  })
  .from(element2, {
    drawSVG: 1,
    duration: 1,
  }, "-=1.25")  // ← Adjust overlap

Change Colors

Update fill colors in your SVG file or dynamically in src/main.js:

gsap.to(element, {
  fill: "#your-color",
  duration: 1
})

Add Custom Easing

GSAP includes premium easing functions:

CustomBounce.create("myBounce", {
  strength: 0.7,
  squash: 3
});

gsap.to(element, {
  y: 100,
  ease: "myBounce"
});

GSAP Plugins (All Free!)

As of 2025, GSAP and all its plugins are completely free for all uses, including commercial projects. This template includes:

• DrawSVGPlugin - Animate SVG strokes (draw on/off effect)
• MorphSVGPlugin - Morph between SVG shapes
• CustomBounce/CustomEase/CustomWiggle - Custom easing functions
• SplitText - Advanced text animation
• ScrollTrigger/ScrollSmoother - Scroll-based animations
• GSDevTools - Timeline debugging tool

All plugins are installed via the standard npm package gsap - no special setup required!

Animation Export

This template is optimized for exporting animations using gsap-video-export.

The main timeline is exposed globally for export:

window.gsap = gsap;
window.tl = mainTimeline;

For detailed export instructions, see EXPORT.md.

Tips

• Use GSDevTools for debugging timelines (uncomment in src/main.js)
• Comment out repeat: -1 when exporting to prevent infinite loops
• Export at higher resolutions (HD/4K) for better quality
• Test animation in browser before exporting
• Keep animation duration reasonable (3-10 seconds is ideal)

Example Output

Check example-export.mp4 and example-export.gif to see the expected output quality.

Building for Production

npm run build

Output will be in the dist/ directory.

Troubleshooting

Animation doesn't play

• Check browser console for errors
• Ensure GSAP plugins are registered
• Verify SVG elements exist before animating

Export fails

• Make sure dev server is running (npm run dev)
• Install gsap-video-export globally
• Check EXPORT.md troubleshooting section

SVG not loading

• Verify public/logo.svg exists
• Check fetch URL in loadSVGs() function
• Ensure SVG is valid XML

Resources

• GSAP Documentation
• gsap-video-export
• Vite Documentation
• TailwindCSS

License

GPL-3.0

---

Happy animating! For questions or issues, check the documentation links above.