skills.rest
gtpgg1013
gtpgg1013COMMUNITY
Explore all skills by this author →
GitHub

gsap-fundamentals

Create GSAP tweens, timelines, and stagger effects for web interfaces.

Updated Mar 21, 2026
Search Tags:#timeline#frontend#javascript#animation#gsap#tween
One-click install
npx skills add https://github.com/gtpgg1013/claude-skills-collection --skill gsap-fundamentals-gtpgg1013
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-fundamentals
Source: https://github.com/gtpgg1013/claude-skills-collection/tree/main/skills/agents/gsap-fundamentals
Command: npx skills add https://github.com/gtpgg1013/claude-skills-collection --skill gsap-fundamentals-gtpgg1013

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly learn and apply GSAP animation fundamentals to build smooth, reliable web animations, reducing trial-and-error and setup time.

Core Features & Use Cases

  • Core GSAP concepts: tweens, timelines, easing, and transform properties to drive UI motion.
  • Practical use cases: hover effects, entry/exit transitions, and orchestrated animation sequences with timelines.
  • Real-world example: implement a button hover that expands with a staggered child reveal using a timeline.

Quick Start

Create a simple GSAP animation sequence for a target element.

Frequently Asked Questions about gsap-fundamentals

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

FAQPage Schema
How do I create a timeline sequence for web animations using GSAP?▼

GSAP timelines group multiple tweens into an orchestrated animation sequence, allowing you to chain entry, exit, and hover transitions with precise timing control.

What is the difference between to, from, and fromTo tweens in GSAP?▼

GSAP tweens define animation start and end states: 'to' animates to a target state, 'from' animates from a specified state, and 'fromTo' explicitly defines both starting and ending property values.

How do I add stagger effects to multiple elements in a GSAP animation?▼

GSAP stagger effects distribute animation start times across multiple target elements, creating a cascading reveal sequence commonly used for UI entry transitions and hover state expansions.

Can I use GSAP animations for both desktop and mobile web interfaces?▼

GSAP supports interactive UI motion across both desktop and mobile web interfaces, handling common transform and color properties to ensure smooth, reliable front-end animations.

What's the best way to structure a button hover effect with a child reveal?▼

Use a GSAP timeline to sequence the button hover effect, expanding the container first and applying a stagger effect to reveal child elements smoothly for interactive UI motion.

Related Skills

Explore More Software Engineering Skills→
grvpanchalgrvpanchal
1

ui-dom

Manipulate DOM elements securely with vanilla JavaScript best practices.

Community
Intermediate
TenBeltzTenBeltz

gsap-scrolltrigger

Build scroll-driven web animations with GSAP and ScrollTrigger.

Official
Advanced
MerzoukeMansouriMerzoukeMansouri
4

mozaic-css-utilities

Create responsive Mozaic Design System layouts with Flexbox and CSS variables.

Community
Intermediate
DanielV-94DanielV-94

animation-designer

Create web UI animations with Framer Motion, CSS keyframes, and GSAP.

Community
Intermediate