skills.rest
Bharathadi01
Bharathadi01COMMUNITY
Explore all skills by this author →
GitHub

gsap-core

Animate web interfaces with GSAP core tweens, timelines, and matchMedia.

Updated Apr 12, 2026
Search Tags:#timeline#frontend#javascript#animation#gsap#scrolltrigger#tween
One-click install
npx skills add https://github.com/Bharathadi01/export-work --skill gsap-core-bharathadi01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/Bharathadi01/export-work/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/Bharathadi01/export-work --skill gsap-core-bharathadi01

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Animation on the web is central to engaging UIs, but building smooth, reliable, and framework-agnostic motion requires a robust core engine and consistent patterns.

Core Features & Use Cases

  • Core tween methods (to, from, fromTo, set) provide fine-grained control over element animation.
  • Timeline and sequencing enable complex choreographies, while stagger supports cascading effects.
  • gsap.matchMedia enables responsive and prefers-reduced-motion handling, ensuring animations adapt to user preferences across breakpoints and contexts.

Quick Start

Create a simple GSAP tween by targeting an element and animating a property over a short duration.

Frequently Asked Questions about gsap-core

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

FAQPage Schema
How do I create smooth frontend animations using GSAP tweens and timelines?▼

GSAP tweens animate web interfaces by targeting elements and transitioning camelCase CSS properties over a duration. You chain multiple tweens into a timeline to sequence complex choreographies, enabling fine-grained control over frontend motion.

Can I use GSAP ScrollTrigger animations in React, Vue, or Svelte?▼

Yes, GSAP is framework-agnostic and integrates with React, Vue, Svelte, or vanilla JS. You control tweens and timelines consistently across these front-end stacks, applying ScrollTrigger-driven animations without framework-specific restrictions.

What is the best way to handle responsive motion and prefers-reduced-motion in JavaScript?▼

Use gsap.matchMedia to handle responsive motion and prefers-reduced-motion preferences. This built-in function ensures animations adapt seamlessly to user preferences and breakpoints across different viewport contexts.

Does GSAP support cascading stagger effects for multiple elements?▼

Yes, GSAP supports stagger effects to create cascading animations across multiple elements. You apply the stagger property within tweens or timelines to stagger start times, producing sequential reveal or transition effects.

When should I use fromTo versus set and to core tween methods?▼

Use fromTo to define both start and end states, set to immediately apply properties without transition, and to to animate from current properties. These core tween methods provide fine-grained control over element animation states.

Related Skills

Explore More Software Engineering Skills→
gyalamanch001agyalamanch001a

gsap-core

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

Community
Intermediate
MengToMengTo
4.5k

cinematic-scroll-storytelling

Coordinate Lenis smooth scrolling with GSAP ScrollTrigger for scroll-driven landing page animations.

Community
Advanced
SharmaAnurag99SharmaAnurag99

gsap-core

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

Community
Intermediate
DanielV-94DanielV-94

animation-designer

Create web UI animations with Framer Motion, CSS keyframes, and GSAP.

Community
Intermediate