gsap-fundamentals_skill

Overview

This skill teaches core GSAP animation concepts for building smooth, performant web animations. It covers tweens (to/from/fromTo/set), transform/CSS/SVG properties, easing, timing controls, and basic control APIs. Use it as the essential starting point when implementing UI transitions, element entrances, or simple timeline sequences. The content focuses on practical examples and patterns you can drop into projects.

How this skill works

The skill inspects and explains GSAP primitives: how to create tweens, configure properties, and control playback with instance methods and callbacks. It breaks down timing (duration, delay, repeat, stagger), easing selection, and performance tips like preferring transforms and killing tweens on teardown. Examples show targeting via selectors, DOM refs, NodeLists, and animating plain objects for canvas/Three.js integration.

When to use it

• Adding basic motion to UI elements (buttons, modals, toasts).
• Animating lists or grids with staggered entrances.
• Creating looping or infinite animations (spinners, pulses).
• Animating SVGs and simple path morphs.
• Animating non-DOM objects (game state, canvas values).

Best practices

• Prefer transform properties (x/y/scale/rotation) over layout properties to avoid reflows.
• Use durations and eases that match the component role (snappy for controls, smooth for entrances).
• Register and kill tweens on component teardown to avoid leaks (tween.kill() or gsap.killTweensOf).
• Use stagger and timeline grouping for predictable sequencing instead of chaining separate tweens.
• Force GPU acceleration sparingly (force3D) and avoid heavy filters on many elements.

Example use cases

• Fade and slide in modals using gsap.from with power3.out for smooth entrance.
• Staggered card grid reveal with gsap.to and stagger.grid starting from center.
• Infinite spinner rotation using repeat: -1 and ease: 'none'.
• Countdown digit flip using rotationX with onComplete to swap values.
• Animate canvas or Three.js properties by tweening plain object values and syncing in onUpdate.