skills.rest
ENG-BXI
ENG-BXICOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-core

Create GSAP tweens with gsap.to(), from(), and fromTo() for DOM and SVG animations.

1|Updated Jan 28, 2026
Search Tags:#gsap#react animation#transform#stagger#tween#javascript animation#responsive motion
One-click install
npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill gsap-core-eng-bxi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill gsap-core-eng-bxi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of building consistent, high-performance JavaScript animations when you need precise control over timing, easing, and element transforms.

Core Features & Use Cases

  • Core tween methods: animate with gsap.to(), gsap.from(), gsap.fromTo(), and gsap.set() for immediate or smooth transitions.
  • Practical animation configuration: use duration, delay, ease, stagger, overwrite, repeat, yoyo, and callbacks to control motion behavior.
  • Responsive & accessibility-ready setup: use gsap.matchMedia() to handle breakpoints and prefers-reduced-motion cleanly.
  • DOM/SVG animation best practices: animate with camelCase properties, transform aliases (x/y/scale/rotation), and autoAlpha to avoid interaction and rendering issues.

Quick Start

Use the gsap-core skill to generate a GSAP tween that animates a set of elements with staggered motion and a responsive reduced-motion fallback.

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 GSAP animations in React?▼

Use gsap.to() with the stagger property in the vars object to sequence motion across targeted DOM elements smoothly. The workflow supports single-step tweens, duration, delay, and easing.

What is the best way to handle prefers-reduced-motion with JavaScript animation?▼

Handle prefers-reduced-motion by using gsap.matchMedia() to configure responsive breakpoints and cleanly adjust JavaScript animations without writing manual media query listeners.

Does GSAP work with Vue and Svelte for DOM and SVG animations?▼

GSAP works with Vue and Svelte for DOM and SVG animations. The core workflow applies across React, Vue, Svelte, and vanilla JavaScript, supporting camelCase properties and transform aliases.

Why do my gsap.from() animations flash or stack incorrectly?▼

Your gsap.from() animations stack incorrectly because of immediateRender behavior. Apply safe overwrite and immediateRender guidance to prevent conflicts when stacking multiple from() or fromTo() tweens.

Can I use transform aliases like x, y, and scale instead of CSS properties?▼

You can use transform aliases like x, y, scale, and rotation instead of CSS properties. GSAP configures these transform options alongside autoAlpha to avoid interaction and rendering issues.

How do I configure default animation settings for multiple GSAP tweens?▼

Configure default animation settings for multiple tweens by using the defaults property to define duration, ease, and other common vars globally for a timeline or tween instance.

Related Skills

Explore More Design & Creative Skills→
SharmaAnurag99SharmaAnurag99

gsap-core

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

Community
Intermediate
magicpro97magicpro97
8

gsap-timeline

Create and manipulate GSAP timelines with customizable tweens and callbacks.

Community
Advanced
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Interactive Web Development

Build interactive web experiences with JavaScript frameworks and animation libraries.

Official
Advanced
KamalabotKamalabot

waapi

Create native WAAPI animations with deterministic timing within HyperFrames.

Community
Intermediate