skills.rest
trobias
trobiasCOMMUNITY
Explore all skills by this author →
Website𝕏@tobiasnwnGitHub

gsap-core

Implements GSAP core tween animations with easing, stagger, and responsive matchMedia behavior.

Updated Aug 28, 2026
Search Tags:#javascript#animation#gsap#stagger#easing#tween#matchmedia
One-click install
npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill gsap-core-trobias
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/trobias/portfolio-nextjs-v2/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill gsap-core-trobias

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 repeat. - 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 a React or vanilla JS page, the Skill produces a staggered gsap.to() tween with proper easing and a reduced-motion fallback. ## Quick Start Ask the assistant 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(target, 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 CSS selector, element, or array, and all tween methods return a Tween instance for playback control.

What is the difference between gsap.to, gsap.from, and gsap.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 by default via immediateRender.

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

Pass a stagger value in the vars object, either as a number of seconds like stagger: 0.1 or as an object such as { each: 0.1, from: 'center' }. The from option accepts start, center, end, edges, random, or an index.

Does GSAP support prefers-reduced-motion and responsive breakpoints?▼

Yes, gsap.matchMedia() runs setup code only when a media query matches and reverts all created animations when it stops matching. Use conditions like '(prefers-reduced-motion: reduce)' to set duration to 0 or skip animation for users who prefer reduced motion.

Why is my second gsap.from() tween not animating on the same element?▼

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

Should I animate CSS transforms or layout properties with GSAP?▼

Prefer GSAP transform aliases like x, y, scale, and rotation over layout-heavy properties such as width, height, top, or left. Transforms apply in a consistent order, perform better, and avoid layout thrashing across browsers.

Related Skills

Explore More Software Engineering Skills→
whimzyLivewhimzyLive
3

gsap-core

Implement GSAP core animations for DOM and SVG elements in React and Vue.

Community
Advanced
brunoolfbrunoolf

gsap-timeline

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

Community
Intermediate
Gito125Gito125

gsap-core

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

Community
Intermediate
beardcoderbeardcoder

css-animate

Create composited CSS animations with scroll-driven effects and reduced-motion fallbacks.

Community
Advanced