tween-animation

What problem does it solve?

Creating responsive and visually appealing UI motion for web apps and games often requires juggling multiple animation patterns and libraries. This skill provides practical GSAP-based tweening guidance to unify and streamline animation workflows, delivering consistent motion across DOM, Canvas, and WebGL contexts.

Core Features & Use Cases

• Core tweening primitives: to(), from(), and fromTo() for moving, fading, and transforming elements.
• Timelines & sequencing: orchestrate complex choreographies with gsap.timeline().
• UI patterns: score counters, progress bars, popups, health bars, and screen shakes to enhance user feedback.
• Real-world use cases: smooth modal transitions, in-game UI animations, and cinematic UI sequences.
• Cross-context examples: DOM, Canvas, and Three.js integration patterns for coherent motion.

Quick Start

Create a basic GSAP tween on a DOM element to move it 100px over 1 second.