skills.rest
DITEKmax
DITEKmaxCOMMUNITY
Explore all skills by this author →
GitHub

gsap-core

Animate DOM and SVG elements with GSAP tweens, timelines, and matchMedia.

Updated Mar 28, 2026
Search Tags:#timeline#accessibility#javascript#animation#responsive#gsap#tween
One-click install
npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-core-ditekmax
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/DITEKmax/rutcampustrack/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-core-ditekmax

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GSAP Core removes the friction of creating performant, synchronized, and accessible animations across DOM and SVG, handling timing, easing, staggering, and responsive behavior so animations remain consistent and controllable across viewports and user preferences.

Core Features & Use Cases

  • Core tween methods: covers gsap.to, gsap.from, gsap.fromTo and immediate set operations for entrance and state changes.
  • Timing and control: timeline sequencing, repeat/yoyo behavior, and runtime control via returned Tween/Timeline instances (pause, play, reverse, progress).
  • Stagger, easing, and defaults: built-in eases, custom easing via CustomEase, stagger patterns for lists and grids, and project-wide defaults.
  • Responsive and accessibility: gsap.matchMedia for breakpoint-scoped animations and prefers-reduced-motion handling to disable or shorten animations for accessibility.
  • Use cases: entrance animations and micro-interactions, synchronized multi-element effects, SVG animations, and interactive UI sequences that require pause/seek/reverse behavior.

Quick Start

Animate a list of cards with a staggered fade-and-move entrance using gsap.to and scope responsive or reduced-motion behavior with gsap.matchMedia.

Frequently Asked Questions about gsap-core

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

FAQPage Schema
How do I create staggered entrance animations for a list of elements in JavaScript?▼

Staggered entrance animations apply sequential delays to multiple elements using tween methods like gsap.from and gsap.to. You define stagger patterns for lists or grids to synchronize fade and move effects across DOM or SVG elements.

Does GSAP work with React, Vue, and Svelte for UI animations?▼

GSAP works with React, Vue, Svelte, and vanilla JavaScript for UI animations. It handles DOM and SVG element animation during code authoring and debugging across these frameworks without requiring additional framework-specific dependencies.

How do I scope animations to specific breakpoints using matchMedia?▼

Scoping animations to breakpoints uses gsap.matchMedia for media-query handling. This ensures responsive animations only activate within defined viewport conditions, keeping UI behavior consistent across different screen sizes.

Can I pause, reverse, or seek a timeline animation at runtime?▼

Timeline animation control allows pausing, playing, reversing, and seeking at runtime. Returned Tween and Timeline instances provide methods to adjust progress dynamically, enabling interactive UI sequences that require precise animation behavior.

How do I handle prefers-reduced-motion for accessible web animations?▼

Accessible web animations handle prefers-reduced-motion by disabling or shortening effects. This accessibility handling ensures users with motion sensitivity experience safe interfaces, preventing visual discomfort while maintaining core UI functionality.

What is the best way to sequence multiple tweens in a timeline?▼

Sequencing multiple tweens uses timeline orchestration to chain animations with precise timing. You control repeat and yoyo behavior, apply built-in or custom easing, and set project-wide defaults to synchronize multi-element effects.

Related Skills

Explore More Software Engineering Skills→
whimzyLivewhimzyLive
3

gsap-core

Implement GSAP core animations for DOM and SVG elements in React and Vue.

Community
Advanced
gyalamanch001agyalamanch001a

gsap-core

Create GSAP tweens for DOM and SVG elements with matchMedia responsiveness.

Community
Intermediate
tututwotututwo

gsap-core

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

Community
Advanced
xiaxianlinxiaxianlin
1

css-animations

Integrate CSS keyframe animations into HyperFrames scenes with deterministic seekability.

Community
Basic