skills.rest
SharmaAnurag99
SharmaAnurag99COMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-core

Animate DOM and SVG elements with GSAP core tweens and utilities.

Updated Apr 17, 2026
Search Tags:#timeline#javascript#animation#svg#gsap#reduced-motion#tween
One-click install
npx skills add https://github.com/SharmaAnurag99/LuxuryBabyShop --skill gsap-core-sharmaanurag99
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/SharmaAnurag99/LuxuryBabyShop/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/SharmaAnurag99/LuxuryBabyShop --skill gsap-core-sharmaanurag99

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides clear, practical guidance for animating DOM and SVG elements with GSAP's core API, removing uncertainty about which tween methods, properties, and patterns to use for performant, controllable animations across frameworks and responsive breakpoints.

Core Features & Use Cases

  • Core tweening: Guidance for gsap.to(), gsap.from(), gsap.fromTo(), and gsap.set() to animate properties, transforms, and CSS variables.
  • Performance & best practices: Use transform aliases (x, y, scale, rotation), autoAlpha for fades, and avoid layout-heavy property animations for smoother rendering.
  • Sequencing & control: Recommend storing returned Tween instances for pause/play/reverse and prefer timelines for complex sequences; use stagger for coordinated entrances.
  • Responsive & accessibility: Use gsap.matchMedia() for breakpoints and prefers-reduced-motion handling so animations are reverted or reduced automatically.
  • Use case: Implement a responsive card entrance that staggers children on desktop, reduces motion when requested by the user, and allows pausing or reversing on interaction.

Quick Start

Create a GSAP tween that moves .card 100px to the right with ease power1.out over 0.6s, fades with autoAlpha, and uses gsap.matchMedia to disable animation when prefers-reduced-motion is active.

Frequently Asked Questions about gsap-core

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

FAQPage Schema
How do I animate DOM elements with GSAP in React or Vue?▼

You animate DOM elements in React or Vue using GSAP core tweens like gsap.to() and gsap.fromTo() to handle property transitions. This Skill provides guidance for applying these methods across frameworks while managing transforms and durations.

What is the best way to handle prefers-reduced-motion with GSAP animations?▼

Handling prefers-reduced-motion with GSAP animations is done using gsap.matchMedia() to automatically revert or reduce tweens. This ensures responsive accessibility by disabling or adjusting animations based on user preferences.

How do I pause, play, or reverse a GSAP tween programmatically?▼

To pause, play, or reverse a GSAP tween programmatically, store the returned Tween instance from methods like gsap.to() in a variable. You can then call pause(), play(), or reverse() on that instance for runtime control.

Should I use a GSAP timeline or individual tweens for complex sequences?▼

For complex sequences, GSAP timelines are recommended over individual tweens to synchronize multiple animations. Timelines allow coordinated entrances using stagger, while individual tweens suit simple, single-element transitions.

Why does my GSAP animation cause layout shifts or jank?▼

GSAP animations cause layout shifts or jank when animating layout-heavy properties instead of transforms. Use transform aliases like x, y, scale, and rotation, or autoAlpha for fades, to ensure smoother rendering and avoid triggering document reflow.

Related Skills

Explore More Software Engineering Skills→
James-GamboaJames-Gamboa

gsap-core

Create GSAP core tweens for DOM and SVG in React, Vue, Svelte, or vanilla JS.

Community
Advanced
Bharathadi01Bharathadi01

gsap-core

Animate web interfaces with GSAP core tweens, timelines, and matchMedia.

Community
Advanced
meytalp-devmeytalp-dev

gsap-animation

Animate web UI elements with GSAP timelines, ScrollTrigger, and stagger effects.

Community
Advanced
KamalabotKamalabot

waapi

Create native WAAPI animations with deterministic timing within HyperFrames.

Community
Intermediate