skills.rest
ankaboot-source
ankaboot-sourceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

gsap-core

Implements GSAP core tweens, eases, staggers, and matchMedia for JavaScript animations.

2|Updated Jul 25, 2026
Search Tags:#javascript#animation#gsap#stagger#easing#tween#matchmedia
One-click install
npx skills add https://github.com/ankaboot-source/boucle --skill gsap-core-ankaboot-source
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/ankaboot-source/boucle/tree/main/.jcode/skills/gsap-core
Command: npx skills add https://github.com/ankaboot-source/boucle --skill gsap-core-ankaboot-source

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 duration, delay, ease, stagger, repeat, yoyo, and callback options. - Transforms and Easing: Documents transform aliases (x, y, scale, rotation), autoAlpha, svgOrigin, directional rotation, built-in eases, and CustomEase curves. - Responsive and Accessible Animation: Uses gsap.matchMedia() for breakpoints and prefers-reduced-motion handling with automatic revert. - Use Case: When a user asks to animate a list of cards fading in with staggered timing in a React or vanilla JS app, this Skill produces correct GSAP code using gsap.to() with stagger and autoAlpha. ## Quick Start Use the gsap-core skill to write a GSAP animation that fades in and slides up all elements with the class .card using 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 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 CSS selector, element, or array, and vars use camelCase property names.

When should I use GSAP instead of CSS animations?▼

Prefer GSAP when you need timeline sequencing, runtime control like pause and reverse, complex easing, scroll-based animation, or dynamic values computed in JavaScript. CSS animations are sufficient only for very simple transitions.

Does GSAP work with React, Vue, and vanilla JS?▼

Yes, GSAP is framework-agnostic and runs in React, Vue, Svelte, Astro, and vanilla JavaScript. It works anywhere JavaScript runs, and its core CSSPlugin animates DOM elements directly.

How do I handle prefers-reduced-motion in GSAP animations?▼

Use gsap.matchMedia() with a reduceMotion condition like "(prefers-reduced-motion: reduce)" and set duration to 0 or skip the animation when it matches. Animations created inside matchMedia 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 start state. Set immediateRender: false on the later tweens to fix it.

Related Skills

Explore More Software Engineering Skills→
47thtechcorner47thtechcorner
21

gsap-core

Create timeline-based animations for DOM and SVG elements with GSAP.

Community
Intermediate
brunoolfbrunoolf

gsap-timeline

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

Community
Intermediate
AlejandroFiginiAlejandroFigini

gsap-performance

Optimize GSAP animations with transforms and compositor-friendly practices.

Community
Intermediate
fengshao1227fengshao1227
5.9k

animate

Adds purposeful animations, micro-interactions, and motion effects to frontend features.

Community
Intermediate