<h1>FLIP SVG elements.</h1> 
<svg viewBox="0 0 100 20">
  <rect class="square" id="sq1" x="0" y="0" width="20" height="20" fill="#9d95ff"/>
  <rect class="square" id="sq2" x="80" y="0" width="20" height="20" fill="#0ae448"/>
</svg>
<p>Click anywhere to animate between states</p>

body {
  background-color: #1d1d1d;;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 1rem;
  min-height: 100vh;
  overflow: hidden;
}

svg {
  width: 100%;
  overflow: hidden;
  margin-top: 1rem;
}

h1 {
 font-weight: 400;
 font-family: "Signika Negative", sans-serif, Arial;
}

p {
  font-size: 1.3rem;
}

gsap.registerPlugin(Flip);

const squares = gsap.utils.toArray(".square");

function doFlip() {
  // Get the initial state
  const state = Flip.getState(squares);
  
  // Make DOM or styling changes (swap the squares in our case)
  swap();
  
  // Animate from the initial state to the end state
  Flip.from(state, {duration: 2, ease: "power1.inOut"});
};

// change the x attributes
function swap() {
  squares.forEach(sq => {
    let x = sq.getAttribute('x');
    x == "80" ? x = "0" : x = "80";
    sq.setAttribute('x', x);
  })
}

// click anywhere to flip
document.addEventListener("click", doFlip);