gsap-core

Create and control DOM/SVG animations with GSAP core tween methods.

Updated Apr 28, 2026
One-click install
npx skills add https://github.com/tututwo/heather-birthday-itenary --skill gsap-core-tututwo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/tututwo/heather-birthday-itenary/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/tututwo/heather-birthday-itenary --skill gsap-core-tututwo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GSAP Core provides a simple, framework-agnostic way to create precise, performant animations using core tween methods (to, from, fromTo, set) and timelines, without having to worry about raw CSS transitions.

Core Features & Use Cases

  • Core tween methods: gsap.to(), gsap.from(), gsap.fromTo(), gsap.set() with camelCase properties and transform aliases.
  • Timelines and sequencing: create complex animation stories with ease and staggering.
  • Scroll-driven and responsive: integrate with ScrollTrigger and gsap.matchMedia() for responsive and reduced-motion scenarios.
  • Framework-agnostic: works with vanilla JS or React/Vue/Svelte via GSAP.

Quick Start

Create a simple tween using gsap.to to move an element with class 'box' 100px to the right over one second.

Frequently Asked Questions about gsap-core

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a timeline for sequencing multiple DOM animations with GSAP?

To create a timeline for sequencing animations, use GSAP core timeline methods to chain tweens and apply staggered sequences. This enables complex animation stories across DOM and SVG elements with precise timing control.

Can I use GSAP tween methods like to, from, and fromTo with React or Vue?

Yes, GSAP core tween methods including to, from, fromTo, and set are framework-agnostic. They work seamlessly with vanilla JavaScript, React, Vue, and Svelte to animate DOM and SVG elements.

What is the best way to handle scroll-driven animations and responsive behavior in JavaScript?

Integrate GSAP core with ScrollTrigger and gsap.matchMedia() to handle scroll-driven animations and responsive behavior. This approach manages viewport-specific animations and respects accessibility considerations like reduced-motion scenarios.

Does GSAP core support transform aliases and accessibility considerations for reduced motion?

Yes, GSAP core supports transform aliases for tweens and includes accessibility considerations. You can use gsap.matchMedia() to detect reduced-motion scenarios and adjust or disable DOM animations accordingly.

Why use GSAP core tween methods instead of CSS transitions for JavaScript animations?

GSAP core provides a framework-agnostic way to create precise, performant animations using tween methods and timelines. It avoids raw CSS transition limitations by providing complex staggering, sequencing, and fine-grained control over DOM and SVG animations.

How do I set default animation properties for multiple tweens in a GSAP timeline?

Use GSAP core defaults within your timeline configuration to set default animation properties for multiple tweens. This applies shared camelCase properties and transform aliases across all included tweens for consistent animation behavior.