skills.rest
Wayn-Git
Wayn-GitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-flip

Implements FLIP layout animations and state transitions using the GSAP Flip plugin.

52|3|Updated Aug 20, 2026
Search Tags:#frontend#javascript#gsap#reordering#layout animation#flip#dom transitions
One-click install
npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-flip-wayn-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-flip
Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/gsap-flip
Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-flip-wayn-git

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Animating DOM layout changes like reordering, resizing, or repositioning often causes jarring jumps. This Skill provides patterns for smooth FLIP (First, Last, Invert, Play) transitions between DOM states using the GSAP Flip plugin. ## Core Features & Use Cases - Layout Transitions: Animate position, scale, and rotation changes when toggling classes, moving elements, or changing grid columns. - Reordering & Enter/Leave: Handle grid shuffles, drag-and-drop reordering, and animate elements entering or leaving the DOM with onEnter/onLeave callbacks. - Use Case: When a user filters a product grid and items rearrange, capture the state with Flip.getState, update the DOM, and call Flip.from to animate every item smoothly into its new position. ## Quick Start Use the gsap-flip skill to animate the reordering of items in my grid container when the sort order changes.

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 with GSAP Flip?▼

Capture the current layout with Flip.getState(targets), make your DOM changes such as toggling classes or reordering elements, then call Flip.from(state, { duration }) to animate elements from their old positions to the new ones.

How to animate grid reordering in JavaScript?▼

Call Flip.getState on the grid items, reorder the DOM nodes with appendChild or insertBefore, then run Flip.from with absolute: true and an optional stagger. This animates each item smoothly to its new grid position.

Does GSAP Flip work with flexbox and grid layouts?▼

Yes, but you should set absolute: true in Flip.from when animating flex or grid containers. Without it, elements can jump during the animation because siblings reflow as each item moves.

Why is my GSAP Flip cross-fade not working?▼

Cross-fade requires matching data-flip-id attributes on the swapped elements so Flip can associate old and new positions. Add unique data-flip-id values to each element before capturing state, then set fade: true in Flip.from.

Should I use scale or width/height for Flip size animations?▼

Use scale: true for better performance since transforms avoid layout recalculation. The default width/height animation is more accurate when surrounding content must reflow around the resizing element.

Related Skills

Explore More Software Engineering Skills→
MicrockMicrock

gsap-flip

Animate DOM layout changes using the FLIP technique with GSAP.

Community
Intermediate
karenrebecagkarenrebecag

gsap-scrolltrigger

Implement GSAP ScrollTrigger for scroll-driven animations in web development.

Community
Intermediate
openaiopenai
5.3k

gsap

Write GSAP tweens, timelines, and effects for HyperFrames compositions.

Official
Intermediate
mgd34msumgd34msu
4

framer-motion

Create declarative animations and gestures for React components with Framer Motion.

Community
Intermediate