skills.rest
ZanebonoAlter
ZanebonoAlterCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-core

Create GSAP tweens, timelines, staggered effects, and ScrollTrigger animations.

19|4|Updated Jan 11, 2026
Search Tags:#javascript#animation#gsap#scrolltrigger#tween#matchmedia
One-click install
npx skills add https://github.com/ZanebonoAlter/Syntopica --skill gsap-core-zanebonoalter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/ZanebonoAlter/Syntopica/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/ZanebonoAlter/Syntopica --skill gsap-core-zanebonoalter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GSAP Core provides a framework-agnostic, high-performance API surface for creating, controlling, and sequencing animations with minimal boilerplate. It focuses on core methods like to(), from(), fromTo(), and set(), plus utilities like stagger, easing, and ScrollTrigger integration to enable robust, scalable web animations.

Core Features & Use Cases

  • Core Tween Methods: gsap.to(), gsap.from(), gsap.fromTo(), gsap.set() for precise, repeatable animation control.
  • Sequencing & Timing: stagger, timelines, and repeat/yoyo behavior to coordinate complex motion.
  • Easing & Transforms: built-in eases and transform aliases for smooth, performant animations.
  • Responsive & Accessibility: gsap.matchMedia() for responsive breakpoints and prefers-reduced-motion support.
  • Use Case: Animate a modal entrance, animate a list of items with staggered delays, or build scroll-driven interactions with ScrollTrigger.

Quick Start

Create a simple tween using gsap.to on a DOM element to move it 100px 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 scroll-driven animations using GSAP and ScrollTrigger?▼

ScrollTrigger-driven animations are created by integrating ScrollTrigger with GSAP core tween methods to trigger and control animations based on scroll position. This enables robust scroll-driven interactions across frameworks.

Can I use GSAP animations in a framework-agnostic vanilla JavaScript project?▼

Yes, GSAP animations work in framework-agnostic vanilla JavaScript projects. The core API provides high-performance animation control with minimal boilerplate, ensuring cross-framework compatibility for your tweens and timelines.

What is the best way to sequence complex web animations with staggered delays?▼

The best way to sequence complex web animations is using GSAP timelines combined with the stagger utility. This approach coordinates complex motion by precisely managing timing, repeat, and yoyo behavior across multiple elements.

How do I handle responsive breakpoints and prefers-reduced-motion in web animations?▼

Responsive breakpoints and prefers-reduced-motion are handled using gsap.matchMedia(). This utility ensures animations adapt to different screen sizes and respect accessibility requirements by conditionally applying tween logic.

What are the core GSAP methods for precise animation control?▼

The core GSAP methods for precise animation control are gsap.to(), gsap.from(), gsap.fromTo(), and gsap.set(). These functions allow repeatable control over element transforms, easing, and timing with minimal boilerplate.

Related Skills

Explore More Software Engineering Skills→
gyalamanch001agyalamanch001a

gsap-core

Create GSAP tweens for DOM and SVG elements with matchMedia responsiveness.

Community
Intermediate
jakubciszakjakubciszak
1

use-dom

Run web-based React code inside native Expo apps using DOM components.

Community
Advanced
skyf0xxskyf0xx
26

gsap-timeline

Coordinate multi-step animation sequences with GSAP timelines.

Community
Intermediate
KamalabotKamalabot

waapi

Create native WAAPI animations with deterministic timing within HyperFrames.

Community
Intermediate