gsap-flip

What problem does it solve?

This Skill solves the problem of creating smooth, jank-free animations when the layout or position of DOM elements changes, such as during reordering, resizing, or tab switching.

Core Features & Use Cases

• FLIP Animation: Implements the First, Last, Invert, Play technique for seamless transitions.
• Layout Transitions: Handles animations for grid reordering, column changes, and responsive design shifts.
• Element Entry/Exit: Animates elements smoothly appearing or disappearing from the DOM.
• Use Case: Imagine a user reordering items in a drag-and-drop list. This Skill ensures the other items animate smoothly to their new positions without abrupt jumps.

Quick Start

Use the gsap-flip skill to animate the '.box' element when it gains the 'moved' class.