Source Preview

GSAP Code Snippets

JavaScript GSAP VS Code Extension API

GSAP Code Snippets – VS Code Extension

GSAP Snippets Screenshot

Overview

GSAP Code Snippets is a Visual Studio Code extension that helps developers write GSAP (GreenSock) animations faster and more efficiently.
It includes a comprehensive set of snippets covering core animation methods, ScrollTrigger, utilities, and advanced GSAP features, all inspired by the official GreenSock documentation.

Objectives

  • Speed up GSAP animation development
  • Reduce repetitive boilerplate code
  • Provide quick access to commonly used GSAP APIs
  • Improve developer productivity and accuracy

Key Features

✅ Snippets for core GSAP animation methods
✅ ScrollTrigger snippets for scroll-based animations
✅ Draggable and Flip plugin helpers
✅ Utility method shortcuts
✅ Inspired by official GreenSock documentation
✅ Works out of the box with no configuration

Included Snippets

Core Animation Methods

  • gto → gsap.to()
  • gsf → gsap.from()
  • gfromTo → gsap.fromTo()
  • gset → gsap.set()
  • gtl → GSAP timeline setup

Defaults & Properties

  • dur → duration
  • del → delay
  • sca → scale
  • opa → opacity
  • rep → repeat
  • yo → yoyo
  • rota → rotation
  • eas → ease
  • onSt → onStart callback
  • oncomp → onComplete callback

ScrollTrigger Snippets

  • gstscroll → Basic ScrollTrigger setup
  • trigg → trigger
  • scru → scrub
  • mark → markers
  • scroll → scroller

GSAP Utilities

  • gsrand → gsap.utils.random()
  • gswrap → gsap.utils.wrap()
  • gclamp → gsap.utils.clamp()
  • gpipe → gsap.utils.pipe()
  • gshuffle → gsap.utils.shuffle()
  • gtoArray → gsap.utils.toArray()
  • gwrapYoyo → gsap.utils.wrapYoyo()

Special Methods

  • stagg → stagger animations
  • gskill → gsap.killTweensOf()

Requirements

  • Visual Studio Code v1.60.0 or higher
  • Basic understanding of GSAP (recommended)

Extension Settings

This extension requires no configuration.
All snippets are available immediately after installation.
Specific snippets can be disabled using VS Code’s User Snippets settings if needed.

Known Issues

  • Some snippet prefixes may conflict with other VS Code extensions
  • Focused on JavaScript-based GSAP animations (limited CSS-only support)

Use Cases

  • Frontend animation development
  • Rapid prototyping with GSAP
  • Learning GSAP APIs efficiently
  • Improving animation workflow in VS Code

Contributing

Contributions are welcome.
Feel free to submit pull requests, suggest new snippets, or report issues via GitHub.

License

MIT License © 2025

Built by Omprakash Chauhan to make GSAP animations faster, cleaner, and more fun ✨