skills.rest
HoussamMrabet
HoussamMrabetCOMMUNITY
Explore all skills by this author →
Website𝕏@MrabetHoussamGitHub

gsap-core

Create GSAP tweens with easing, stagger, transforms, and responsive matchMedia behavior.

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

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 common vars like duration, delay, ease, stagger, repeat, and overwrite. - Transforms & Easing: Documents transform aliases (x, y, scale, rotation), autoAlpha, svgOrigin, directional rotation, and the full built-in ease catalog plus CustomEase. - Responsive & Accessible Animation: Explains gsap.matchMedia() for breakpoints and prefers-reduced-motion handling with automatic revert. - Use Case: A developer asks for a staggered card entrance animation in a React app that respects reduced-motion settings; the Skill produces a gsap.to() tween with stagger, transform aliases, and a matchMedia block that sets duration to 0 when reduceMotion matches. ## Quick Start Use the gsap-core skill to write a GSAP animation that fades in and slides up all elements with the class 'card' with a 0.1 second stagger.

Frequently Asked Questions about gsap-core

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

FAQPage Schema
How do I create a GSAP tween 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 }). Use gsap.from() for entrances and gsap.fromTo() when you need explicit start and end values.

What is the best JavaScript animation library for React or Vue?▼

GSAP is a framework-agnostic animation library that works in React, Vue, Svelte, and vanilla JS. It provides timeline sequencing, scroll-driven animation via ScrollTrigger, and runtime control like pause, reverse, and seek.

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

Pass a stagger value in the vars object, such as stagger: 0.1 for a fixed delay between targets, or an object like { amount: 0.3, from: 'center' } for advanced distribution across the targets array.

Does GSAP support prefers-reduced-motion accessibility?▼

Yes, gsap.matchMedia() lets you add a '(prefers-reduced-motion: reduce)' condition and set duration to 0 or skip animations when it matches. All animations created in the handler revert automatically when the query stops matching.

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

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 tween 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 like width, height, top, and left. Transforms render more performantly and apply in a consistent order across browsers.

Related Skills

Explore More Software Engineering Skills→
kartojalkartojal
11

gsap-core

Create DOM and SVG animations with GSAP timelines and easing.

Community
Intermediate
DanielV-94DanielV-94

gsap-timeline

Sequence GSAP tweens with timelines, position parameters, and labels.

Community
Intermediate
umairshahid622umairshahid622

gsap-utils

Applies GSAP utility functions for clamping, mapping, snapping, and randomizing animation values.

Community
Intermediate
beardcoderbeardcoder

css-animate

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

Community
Advanced