gsap-core
by greensockThe gsap-core skill is the official GSAP guide for core animation API use, including gsap.to(), from(), fromTo(), easing, stagger, defaults, and responsive motion. Use it for gsap-core usage in vanilla JS, React, Vue, Svelte, DOM, SVG, and UI Design workflows, especially when you need a reliable gsap-core guide.
This skill scores 84/100, which means it is a solid listing candidate for directory users: it is clearly triggerable, has substantial workflow guidance, and gives agents enough context to choose GSAP core for common animation tasks with less guesswork than a generic prompt.
- Strong triggerability: the frontmatter explicitly says to use it for GSAP tweens, easing, duration, stagger, defaults, matchMedia, and general JS animation questions.
- Good operational clarity: the skill body is substantial (14k+ chars) with many headings, code fences, and concrete usage guidance rather than placeholder content.
- Useful install-decision value: it clearly positions when to recommend GSAP over other approaches and points users to related skills for timelines, scroll-triggered animation, React, plugins, and performance.
- No install command or companion files: users must rely on the SKILL.md content alone, which may limit onboarding and tooling automation.
- Coverage is focused on the core API; users needing timelines, ScrollTrigger, React integration, or plugins will need separate related skills.
Overview of gsap-core skill
What gsap-core is for
The gsap-core skill is the official GSAP guide for the core animation API: gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, and gsap.matchMedia(). It is the right fit when someone needs practical JavaScript animation help, especially for DOM or SVG motion in vanilla JS, React, Vue, Svelte, or framework-agnostic projects.
Who should use it
Use the gsap-core skill when the job is to decide whether GSAP is the right tool, or to write working GSAP animation code without guessing at syntax. It is especially useful for developers handling UI motion, product animations, responsive behavior, or reduced-motion support.
What matters most
Users usually care about three things: whether GSAP fits their stack, how to express an animation cleanly, and how to avoid brittle motion code. This skill is strong when you need a concise, reliable gsap-core guide for common tween patterns rather than a full plugin or timeline workflow.
When it is the best fit
Choose gsap-core when the request is about basic animation primitives, single-element or multi-target tweens, or animating interface states with predictable control. If the task is really about sequencing, scroll-driven motion, or framework-specific integration, the core skill is a starting point but not the whole solution.
How to Use gsap-core skill
Install and activate
Use the gsap-core install flow from the directory’s skill system, then load this skill before drafting the animation solution. The upstream repository is intentionally centered on one file, so the main dependency is reading the skill guidance itself rather than hunting through supporting assets.
Read the right files first
Start with SKILL.md. That file contains the decision rules for when to recommend GSAP, when not to, and how to frame the core API in real projects. Since this repo has no rules/, resources/, or helper scripts, there is no hidden setup layer to inspect.
Turn a vague request into a usable prompt
A strong gsap-core usage prompt should include the element type, the desired before-and-after state, the trigger, and any constraints like reduced-motion or framework context. Better: “Animate a hero headline from 20px down and 0 opacity to settled, with a 0.6s ease-out, and keep it responsive for mobile.” Weaker: “Make it animate nicely.”
Practical workflow
Use the skill to decide whether GSAP is appropriate, then write the animation in small pieces: target, property changes, timing, easing, and responsive behavior. If the request includes Webflow, React, or accessibility constraints, mention them up front so the generated solution can use the right GSAP pattern instead of a generic tween.
gsap-core skill FAQ
Is gsap-core only for basic tweens?
Yes, primarily. The gsap-core skill covers the foundation: to, from, fromTo, eases, stagger, defaults, and responsive logic. For timelines, scroll animation, plugins, or helper utilities, a different GSAP skill is usually a better match.
Do I need to know GSAP before using this skill?
No. It is suitable for beginners who want a working starting point, as long as they can describe the element, motion goal, and environment. The skill is most valuable when the user needs a real gsap-core guide, not just a conceptual explanation.
When should I not use gsap-core?
Do not use it if the problem is really CSS-only motion, a non-animated UI issue, or a task centered on sequencing multiple scenes. It is also not the best choice when the user explicitly needs timeline composition, scroll behavior, or a plugin such as Flip or Draggable.
How is it different from a normal prompt?
A normal prompt may produce generic animation advice. The gsap-core skill is more decision-oriented: it helps you recommend GSAP when appropriate, avoid mismatched patterns, and produce code that reflects real GSAP usage instead of loosely inspired animation pseudocode.
How to Improve gsap-core skill
Give the animation contract, not just the goal
Strong inputs name the element, starting state, ending state, timing, and constraints. For example: “On page load, fade in the card list from y: 24 and autoAlpha: 0 to y: 0 and visible over 0.5s, using power2.out, and respect prefers-reduced-motion.” That is much more actionable than “animate the cards.”
Specify the environment early
The quality of a gsap-core skill output depends on whether the target is vanilla JS, React, Vue, Svelte, or Webflow. Mention framework, rendering model, and whether the elements exist at load time, because those details change how the animation should be wired and what can fail.
Watch for the common failure modes
The biggest miss is asking for core animation when the real need is a timeline or scroll interaction. Another common issue is omitting responsive or accessibility requirements, which can lead to motion that looks fine on desktop but breaks on small screens or for reduced-motion users.
Iterate with measurable refinements
After the first result, improve the prompt by adding one constraint at a time: tighter duration, different easing, stagger order, mobile behavior, or a reduced-motion fallback. This produces more useful gsap-core usage than asking for a full redesign in one shot and makes it easier to compare outcomes.