Flip Transitions

advanced

Animate between two layout states using GSAP Flip. Record state, toggle a class, animate the difference.

How Flip Works

GSAP Flip records an element's position, size, and style. Then you make a change (toggle a CSS class). Then Flip animates from the old state to the new state. Etch Motion provides flip-expand (click to toggle between compact and expanded) and flip-layout (animate children reorder/resize). You must provide CSS for both states — the plugin handles the animation.

<div class="card"
     data-etch-motion="flip-expand"
     data-etch-motion-trigger="click"
     data-etch-motion-flip-class="is-expanded">
  Content
</div>

/* Your CSS */
.card 
.card.is-expanded

Flip requires the GSAP Flip plugin, loaded conditionally only when flip presets are detected on the page.

Flip Cleanup

After the animation completes, Etch Motion removes temporary inline styles that GSAP adds during the transition. This prevents style accumulation on elements that get flipped multiple times. Target the expanded state in CSS using the class name from data-etch-motion-flip-class.