skills.rest
kartojal
kartojalCOMMUNITY
Explore all skills by this author →
𝕏@kartojalGitHub

gsap-core

Create DOM and SVG animations with GSAP timelines and easing.

11|1|Updated Mar 20, 2026
Search Tags:#timeline#javascript#animation#svg#gsap#scrolltrigger
One-click install
npx skills add https://github.com/kartojal/openvps --skill gsap-core-kartojal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/kartojal/openvps/tree/main
Command: npx skills add https://github.com/kartojal/openvps --skill gsap-core-kartojal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GSAP Core provides a consistent, high-performance API for creating and controlling animations in the browser, removing the complexity of coordinating time-based transitions, easing, and staggered effects across DOM and SVG elements.

Core Features & Use Cases

  • Precise Tweening: Animate properties with gsap.to, gsap.from, and gsap.fromTo for predictable start/end behavior.
  • Easing & Timing Control: Built-in eases and custom curves for refined motion; supports duration, delay, repeat, and yoyo controls.
  • Staggers & Utilities: Efficiently animate collections with stagger, distribute values across items, and use gsap.utils helpers for mapping and snapping.
  • Use Case: Implement entrance/exit animations, interactive UI micro-interactions, SVG morphs, or coordinated multi-element timelines with reliable cross-browser performance.

Quick Start

Animate a button to slide right 100px with gsap.to(element, { x: 100, duration: 0.6 }).

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 entrance animations for DOM and SVG elements?▼

Create staggered entrance animations for DOM and SVG elements by applying tweening methods with stagger utilities to efficiently animate collections and distribute values across items with precise timing control.

What is the best way to sequence multiple UI motion tasks into a single timeline?▼

The best way to sequence UI motion tasks is using timeline controls to coordinate multi-element transitions, applying built-in easing curves and duration delays for predictable start and end behavior.

Can I use GSAP for responsive animations that adapt to reduced-motion preferences?▼

GSAP supports responsive and reduced-motion adaptations for web interfaces, allowing you to scope selectors and modify tween parameters to respect user motion preferences while maintaining cross-browser performance.

How do I animate an element from a specific starting state to an ending state?▼

Animate elements from a specific starting state to an ending state using gsap.fromTo, which provides predictable start and end behavior, unlike gsap.to or gsap.from that animate relative to current values.

Does GSAP require an npm installation to animate web interface interactions?▼

GSAP does not strictly require npm installation, as integration is supported via npm or a client-side GSAP bundle, allowing you to implement UI micro-interactions and SVG morphs either way.

Related Skills

Explore More Design & Creative Skills→
wubq511wubq511
6

gsap-plugins

Register GSAP plugins for scroll, SVG, and draggable animations.

Community
Advanced
fyunusafyunusa

gsap-scrolltrigger

Implement GSAP and ScrollTrigger animations for scroll-driven web storytelling.

Community
Advanced
RamonsDkaRamonsDka
1

animejs

Animate CSS, SVG, and JavaScript objects with Anime.js timelines and effects.

Community
Advanced
aesthezelaesthezel
8

gsap-core

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

Community
Advanced