skills.rest
KryptaMedina7
KryptaMedina7COMMUNITY
Explore all skills by this author →
GitHub

gsap-core

Implements GSAP core tweens, eases, staggers, and matchMedia for DOM and SVG animation.

Updated Aug 10, 2026
Search Tags:#javascript#animation#gsap#reduced-motion#stagger#easing#tween
One-click install
npx skills add https://github.com/KryptaMedina7/quero-s-home --skill gsap-core-kryptamedina7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/KryptaMedina7/quero-s-home/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/KryptaMedina7/quero-s-home --skill gsap-core-kryptamedina7

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Writing correct GSAP animations requires knowing the right tween methods, transform aliases, easing names, and accessibility patterns; this Skill provides the official core API guidance so generated animation code follows GSAP best practices. ## Core Features & Use Cases - Core Tween Methods: Covers gsap.to(), from(), fromTo(), and set() with correct vars like duration, delay, ease, stagger, overwrite, and callbacks. - Transforms & Easing: Documents transform aliases (x, y, scale, rotation, xPercent), autoAlpha, svgOrigin, directional rotation, and the full built-in ease catalog plus CustomEase. - Responsive & Accessible Animation: Uses gsap.matchMedia() for breakpoints and prefers-reduced-motion so animations revert cleanly and respect user accessibility settings. - Use Case: When a user asks to animate a card grid entrance in React with staggered timing and reduced-motion support, this Skill produces gsap.to() code with stagger, autoAlpha, and a matchMedia guard. ## Quick Start Ask the AI to animate a set of elements with GSAP, for example staggering list items into view with a power3 ease and reduced-motion support.

Frequently Asked Questions about gsap-core

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

FAQPage Schema
How do I animate elements with GSAP in JavaScript?▼

Use gsap.to(targets, vars) to animate from the current state to the values in vars, such as gsap.to(".box", { x: 100, duration: 1 }). Targets can be a selector string, element, or array, and vars use camelCase property names.

What is the difference between gsap.to, from, and fromTo?▼

gsap.to() animates from the current state to the given values, gsap.from() animates from the given values to the current state, and gsap.fromTo() defines both start and end explicitly. from() and fromTo() render their start state immediately unless immediateRender is false.

How do I stagger animations across multiple elements in GSAP?▼

Add a stagger value to the vars, either as a number of seconds like stagger: 0.1 or an object such as { amount: 0.3, from: "center" }. GSAP offsets each target's start time automatically across the matched elements.

Does GSAP support prefers-reduced-motion accessibility?▼

Yes, gsap.matchMedia() accepts a reduceMotion condition like "(prefers-reduced-motion: reduce)" so you can set duration to 0 or skip animation. All animations created inside the handler revert automatically when the query stops matching.

Why is my second gsap.from() tween not playing?▼

Multiple from() or fromTo() tweens on the same property conflict because immediateRender defaults to true, so the later tween overwrites the first one's end state. Set immediateRender: false on the later tweens to fix it.

Should I animate width and height or transforms in GSAP?▼

Prefer transform aliases like x, y, scale, and rotation over layout properties such as width, height, top, or left. Transforms avoid layout recalculation and render more performantly across browsers.

Related Skills

Explore More Software Engineering Skills→
Gekkos-techGekkos-tech
4

gsap-suite

Integrate GSAP animations into agency projects with ScrollTrigger and framework support.

Official
Advanced
brunoolfbrunoolf

gsap-timeline

Sequences and choreographs GSAP animations using timelines, labels, and the position parameter.

Community
Intermediate
ankaboot-sourceankaboot-source
2

gsap-plugins

Implements GSAP plugin animations including scroll, drag, SVG morphing, and text splitting.

Official
Intermediate
DanielV-94DanielV-94

animation-designer

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

Community
Intermediate