skills.rest
Carlosfwd86
Carlosfwd86COMMUNITY
Explore all skills by this author →
GitHub

gsap-core

Animate DOM and SVG elements with GSAP core tweens and easing.

Updated Jun 4, 2026
Search Tags:#javascript#animation#responsive#gsap#stagger#easing#tweens
One-click install
npx skills add https://github.com/Carlosfwd86/Conectando-Talento-UCR --skill gsap-core-carlosfwd86
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/Carlosfwd86/Conectando-Talento-UCR/tree/main/Skill%20GSAP/gsap-skills/skills/gsap-core
Command: npx skills add https://github.com/Carlosfwd86/Conectando-Talento-UCR --skill gsap-core-carlosfwd86

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create smooth, controllable JavaScript animations without wrestling with brittle CSS timing or framework-specific workarounds. It is ideal for motion that needs precise playback control, reusable defaults, and responsive behavior.

Core Features & Use Cases

  • Core tweening: Animate elements with gsap.to, gsap.from, gsap.fromTo, and gsap.set.
  • Motion control: Use duration, easing, stagger, repeats, callbacks, and tween playback methods to shape animation behavior.
  • Responsive and accessible motion: Adapt animations with gsap.matchMedia and reduce motion for users who prefer minimal animation.
  • Use case: Build a polished landing page entrance animation for headlines, cards, and buttons with staggered timing and mobile-safe behavior.

Quick Start

Create a GSAP animation for a page section with staggered entrances and a reduced-motion fallback.

Frequently Asked Questions about gsap-core

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

FAQPage Schema
How do I create staggered entrance animations for UI elements in JavaScript?▼

Staggered entrance animations are created using GSAP core tweens with the stagger feature, allowing you to sequence motion across multiple UI elements with precise timing, easing, and duration control for polished page load sequences.

Can I build responsive JavaScript animations that adapt to different screen sizes?▼

Responsive JavaScript animations can be built using gsap.matchMedia to apply different motion behaviors at specific breakpoints, ensuring your tweens adapt properly to varying screen sizes and device contexts.

How do I support reduced-motion preferences when animating DOM elements?▼

Reduced-motion support is handled using gsap.matchMedia to detect user accessibility preferences, allowing you to disable or minimize DOM element animations for users who prefer minimal motion.

What is the best way to animate SVG elements without framework-specific workarounds?▼

Animating SVG elements without framework workarounds is best handled using GSAP core transform-based motion, applying gsap.to, gsap.from, and gsap.fromTo tweens for smooth, controllable playback in vanilla JavaScript.

Does this approach work for both vanilla JavaScript and web frameworks?▼

Yes, these GSAP tweening techniques apply to both vanilla JavaScript and web frameworks, allowing you to animate DOM and SVG elements with consistent easing, callbacks, and playback methods across different environments.

Why use JavaScript tweens instead of CSS timing for complex UI animation sequences?▼

JavaScript tweens provide precise playback control, reusable defaults, and staggered timing that CSS timing lacks, preventing brittle animation sequences and avoiding framework-specific workarounds for complex motion behavior.

Related Skills

Explore More Software Engineering Skills→
gyalamanch001agyalamanch001a

gsap-core

Create GSAP tweens for DOM and SVG elements with matchMedia responsiveness.

Community
Intermediate
magicpro97magicpro97
8

gsap-timeline

Create and manipulate GSAP timelines with customizable tweens and callbacks.

Community
Advanced
xingBaGanxingBaGan

gsap-core

Animate CSS properties on DOM elements with GSAP tweens and easing.

Community
Advanced
hoanghd218hoanghd218
7

css-animations

Seek and synchronize CSS keyframe animations within HyperFrames using a CSS runtime adapter.

Community
Intermediate