skills.rest
greensock
greensockOFFICIAL
Explore all skills by this author →
Website𝕏@GreenSockGitHub

gsap-core

Animate JavaScript objects with GSAP core API tweens and easing.

13.3k|785|Updated Mar 4, 2026
Search Tags:#react#vue#svelte#animation#JavaScript#GSAP
One-click install
npx skills add https://github.com/greensock/gsap-skills --skill gsap-core-greensock
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/greensock/gsap-skills/tree/main/skills/gsap-core
Command: npx skills add https://github.com/greensock/gsap-skills --skill gsap-core-greensock

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables users to animate JavaScript objects using the GreenSock Animation Platform's core API, facilitating smooth, responsive, and efficient animations across a variety of web development scenarios.

Core Features & Use Cases

  • Core API: GSAP's to(), from(), fromTo() methods for animating properties like position, opacity, scale, etc.
  • Easing and Duration: Utilize GSAP's wide range of easing functions and control animation durations.
  • Responsive Animation: Use gsap.matchMedia() to adapt animations to different screen sizes and user preferences.
  • Use Case: When you need to animate elements on a webpage, whether it's a simple fade-in or complex scroll-linked interactions.

Quick Start

Animate the background color of the #app element from blue to red with a duration of 1 second using GSAP.

Frequently Asked Questions about gsap-core

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

FAQPage Schema
How do I animate JavaScript objects in React, Vue, or Svelte?▼

GSAP's core API provides to(), from(), and fromTo() methods to animate JavaScript object properties like position, opacity, and scale across React, Vue, Svelte, and vanilla JS environments.

What is the best way to handle responsive web animations and reduced motion preferences?▼

Use gsap.matchMedia() to implement responsive web animations that adapt to different screen sizes while automatically respecting user reduced motion preferences for accessible design.

How do I create staggered animations and apply easing functions in JavaScript?▼

GSAP's core API handles staggered animations to sequence multiple elements and provides a wide range of easing functions to control timing and movement duration precisely.

Can I use GSAP for simple fade-in effects and scroll-linked interactions without additional libraries?▼

Yes, GSAP's core API supports everything from simple fade-in transitions to complex scroll-linked interactions natively, handling single tweens and timing control without external dependencies.

Does GSAP's core API work with vanilla JavaScript or do I need a specific framework?▼

GSAP's core API works seamlessly with vanilla JavaScript as well as React, Vue, and Svelte, providing foundational animation capabilities and best practices for any web development scenario.

Related Skills

Explore More Software Engineering Skills→
nikkogiblernikkogibler
2

gsap-core

Create GSAP tweens and timelines across React, Vue, Svelte, and vanilla JavaScript.

Community
Intermediate
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
yequdesuyequdesu

gsap-frameworks

Animate UI components in Vue, Svelte, and non-React frameworks with GSAP lifecycle hooks.

Community
Intermediate
KamalabotKamalabot

waapi

Create native WAAPI animations with deterministic timing within HyperFrames.

Community
Intermediate