gsap-flip

Name: gsap-flip
Availability: InStock
Author: Microck

Animate DOM layout changes using the FLIP technique with GSAP.

Updated Feb 17, 2026

Search Tags:#layout #animation #transitions #gsap #dom #flip

Ready to run

npx skills add https://github.com/Microck/gsap-skills --skill gsap-flip

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-flip
Source: https://github.com/Microck/gsap-skills/tree/main/skills/gsap-flip
Command: npx skills add https://github.com/Microck/gsap-skills --skill gsap-flip

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about gsap-flip

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

FAQPage Schema

How do I animate layout changes when DOM elements reorder or resize?▼

You can animate layout changes using the FLIP (First, Last, Invert, Play) technique to calculate position differences and smoothly transition elements to their new DOM states without abrupt jumps.

What is the FLIP technique for DOM animation and when should I use it?▼

The FLIP technique records the first and last positions of a DOM element, inverts the position difference, and plays an animation to zero. Use it for grid reordering, tab switching, and responsive design shifts.

How do I animate elements smoothly appearing or disappearing from the DOM?▼

You can animate element entry and exit by applying the FLIP technique to capture position, scale, and rotation changes, ensuring elements transition smoothly when they are added to or removed from the DOM.

Does GSAP work with ScrollTrigger for scroll-driven layout animations?▼

Yes, GSAP integrates with ScrollTrigger to handle scroll-driven layout animations, allowing you to bind FLIP transitions to scroll positions for dynamic DOM state changes.

Can I use this FLIP animation approach for interactive components like accordions and modals?▼

Yes, the FLIP technique handles complex interactive scenarios like accordions, tabs, and modals by animating the surrounding elements smoothly when the layout shifts during user interaction.

Why do items jump abruptly during drag-and-drop list reordering?▼

Items jump because the DOM updates instantly without animating position changes. Implementing the FLIP technique calculates the positional offset and plays a smooth transition animation to resolve the jank.