GSAP Flip

The FLIP animation technique (First, Last, Invert, Play) is a powerful method for animating layout changes efficiently in the browser.

Table of Contents

1. How FLIP Works

2. Installing Flip Plugin

example toggleActions : moving box container a to b

Flip Animation Workflow Used

Example onEnter`: Flip A → B using ScrollTrigger

Flip Animation Workflow Used

Key Part

Example scrub : Flip A → B using ScrollTrigger

Flip Animation Workflow Used

example: moving cards between containers

Flip Animation Workflow Used

example: grid layout that expands and collapses

Flip Animation Workflow Used