<h1>Smoothly change flex direction with GSAP's Flip plugin</h1>

<button id="changeLayout" class="button">change</button>
<div class="group">
  <div class="box">Common "FLIP" techniques employed by other tools won't work with flex elements because of the way browsers handle width/height. 
  </div>
  <div class="box">Simply set <code>absolute: true</code> to have GSAP's Flip plugin make the elements position: absolute during the flip to work around challenges with flex and grid layouts. 
  </div>
  <div class="box">When the flip animation is done, elements get reverted back to their normal positioning and everything appears seamless.</div>
  <div class="box">Happy flipping!</div>
</div>
<a href="https://greensock.com/"><img src="https://assets.codepen.io/16327/hero-logo.svg" class="logo" /></a>

body {
  background-color: #222;
  color: #ccc;
  padding: 10px 24px;
  font-family: "Signika Negative", sans-serif, Arial;
  font-weight: 300;
}

.group.reorder {
  flex-direction: row;
}

h1 {
  color: white;
  font-weight: 400;
}

.group {
  width: 740px;
  height: auto;
  padding: 4px;
  background: #111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: black;
  position: relative;
}

.box {
  margin: 4px;
  padding: 8px;
  font-size: 22px;
  line-height: 28px;
}
.box:nth-child(1) {
  background: rgba(85, 102, 205, 0.7);
}
.box:nth-child(2) {
  background: rgba(125, 70, 200, 0.7);
}
.box:nth-child(3) {
  background: rgba(33, 150, 243, 0.7);
}
.box:nth-child(4) {
  background: rgba(0, 188, 212, 0.7);
}

.button {
  padding: 10px 20px;
  margin-bottom: 10px;
}
.logo {
  position: absolute;
  width: 60px;
  bottom: 20px;
  right: 30px;
}

gsap.registerPlugin(Flip);

const group = document.querySelector(".group");

document.querySelector(".button").addEventListener("click", () => {
  // Get the initial state
  const state = Flip.getState(".group, .box");
  
  console.log(state);
  
  // toggle the flex direction
  group.classList.toggle("reorder");
  
  Flip.from(state, {
    absolute: true, // uses position: absolute during the flip to work around flexbox challenges
    duration: 0.5, 
    stagger: 0.1,
    ease: "power1.inOut"
    // you can use any other tweening properties here too, like onComplete, onUpdate, delay, etc. 
  });
});