Next ❯

GSAP FLIP Plugin (Layout Animations Made Easy)

  • FLIP plugin helps you animate between layout states smoothly when elements change position or size.

  • Introduction

    The FLIP Plugin in GSAP makes it easy to animate layout changes that normally jump instantly.

    FLIP stands for:

    • First

    • Last

    • Invert

    • Play

    It is commonly used for:

    • Card reordering

    • Grid / gallery animations

    • Expanding & collapsing UI

    • Drag-and-drop effects

    FLIP is an official plugin from GreenSock GSAP

  • The Problem FLIP Solves

    Without FLIP:

    • Changing CSS layout = instant jump

    • Elements suddenly move or resize

    With FLIP:

    • Layout changes animate smoothly

    • No manual position calculations

    👉 Think of FLIP as “animate after DOM changes”.

  • Basic Concept (FLIP Explained Simply)

    1. First – capture initial position

    2. Last – change the layout (CSS / DOM)

    3. Invert – calculate difference

    4. Play – animate smoothly

    GSAP handles all math for you.

Installation / Setup 

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/Flip.min.js"></script>
gsap.registerPlugin(Flip);


const state = Flip.getState(".card");

// change layout here
container.classList.toggle("active");

Flip.from(state, {
  duration: 0.6,
  ease: "power2.inOut"
});

  • Parameters / Options

    OptionMeaningExample
    getState()Capture initial layout.card
    from()Animate from old state—
    durationAnimation time0.6
    easeMotion easing"power2.inOut"
    absolutePrevent layout shifttrue

Card Grid Reorder 

const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  const state = Flip.getState(".item");

  grid.classList.toggle("reorder");

  Flip.from(state, {
    duration: 0.7,
    stagger: 0.05
  });
});

Expand / Collapse Card 

card.addEventListener("click", () => {
  const state = Flip.getState(card);

  card.classList.toggle("expanded");

  Flip.from(state, { duration: 0.5 });
});

List Sorting Animation 

const state = Flip.getState("li");

list.appendChild(list.children[0]);

Flip.from(state, {
  duration: 0.5,
  ease: "power1.inOut"
});

FLIP with Absolute Positioning 

Flip.from(state, {
  duration: 0.6,
  absolute: true
});

  • Best Practices

    • Capture state before DOM change

    • Use absolute:true for complex layouts

    • Combine with stagger for smooth flow

    • Use FLIP instead of manual transforms

  • Comparison

    MethodUse Case
    FLIP PluginLayout transitions
    CSS transitionSimple cases
    Transform mathComplex & manual
    Auto LayoutLimited control

  • Quick Summary

    • FLIP animates layout changes

    • No manual position calculation

    • Perfect for grids & UI

    • Smooth and professional

    • Beginner-friendly syntax

Next ❯