skills.rest
Microck
MicrockCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-core

Create and control web animations with GSAP core tweening and timelines.

Updated Feb 17, 2026
Search Tags:#timeline#javascript#animation#gsap#web animation#tweening
One-click install
npx skills add https://github.com/Microck/gsap-skills --skill gsap-core
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/Microck/gsap-skills/tree/main/skills/gsap-core
Command: npx skills add https://github.com/Microck/gsap-skills --skill gsap-core

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides the fundamental tools for creating smooth, performant animations in web development using the GreenSock Animation Platform (GSAP).

Core Features & Use Cases

  • Core Tween Methods: Animate properties using gsap.to(), gsap.from(), gsap.fromTo(), and gsap.set().
  • Timeline Sequencing: Orchestrate complex animation sequences with gsap.timeline(), including precise timing, labels, and overlaps.
  • Playback Controls: Manage animations with play, pause, reverse, progress, and timeScale.
  • Staggering & Keyframes: Animate multiple elements with delays or define multi-stage animations within a single tween.
  • Use Case: Create an engaging hero section animation where text fades in, elements slide into place, and a call-to-action button animates on after a short delay.

Quick Start

Use the gsap-core skill to animate an element with the class 'my-element' to an opacity of 0 and a y-position of 100 over 1 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 web animations with JavaScript that sequence multiple elements?▼

Web animations with JavaScript can be sequenced using GSAP timelines to orchestrate complex sequences with precise timing, labels, and overlaps for dynamic visual effects.

What's the best way to animate CSS properties and SVG attributes on a web page?▼

Animate CSS properties and SVG attributes on a web page using core tweening methods like gsap.to() and gsap.fromTo() to define start and end states with precise easing.

Can I control playback like play, pause, and reverse for JavaScript web animations?▼

JavaScript web animations can be controlled with playback functions including play, pause, reverse, progress, and timeScale to manage interactive elements across web applications.

How do I stagger web animations across multiple UI elements with delays?▼

Stagger web animations across multiple UI elements by applying built-in staggering functions to introduce calculated delays between each element's tweening sequence.

Does GSAP core require dependencies to animate JavaScript object values?▼

GSAP core requires no dependencies to animate JavaScript object values, CSS properties, and SVG attributes, providing fundamental tweening tools for performant web development.

Related Skills

Explore More Design & Creative Skills→
aesthezelaesthezel
8

gsap-core

Create GSAP tweens, timelines, and scroll-driven animations in JavaScript.

Community
Advanced
blueif16blueif16

website-replicator

Replicate website UI and scroll animations into GSAP, CSS, or Framer Motion code.

Community
Advanced
SafiNguyenSafiNguyen

gsap-plugins

Register GSAP plugins and implement complex web animations.

Community
Intermediate
Im5tuIm5tu
6

flutter-animations

Guide developers in implementing Flutter animations across implicit, explicit, hero, staggered, and physics-based types.

Community
Basic