Animate between layout positions

미리보기 안의 버튼·입력·포인터로 모션을 확인하세요. 실행 방식은 아래 활용 메모를 참고하세요.

<!doctype html>
<!-- Source: https://codepen.io/GreenSock/pen/rNMBXxb; archived original panels separately. Runtime: official GSAP 3.15.0. -->
<html lang="en" class=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Animate between layout positions</title>

<link rel="stylesheet" href="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/xxmzBrw.css">
<style>
html,
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

.container {
  position: relative;
  width: 90vw;
  height: 90vh;
  max-width: 700px;
  max-height: 700px;
  border-radius: 9px;
/*   border: solid 2px red; */
}

#element {
  background: var(--color-ui-gradient-background);
  border-radius: 15px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-just-black);
  border: solid 2px transparent;
}

#element.absolute,
#absolute-marker {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

#absolute-marker {
  width: 100px;
  height: 100px;
  bottom: 30px;
  right: 30px;
  border-radius: 10px;
  outline: dashed 2px var(--color-surface-white);
  z-index: -1;
  outline-offset: 0.5rem;
}

button {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

</style></head><body>
<div class="container">
  <div id="element">
    relative
  </div>

  <div id="absolute-marker"></div>

  <button>Change the position</button>
</div>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-gsap.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-Flip.min.js"></script>
<script>
gsap.registerPlugin(Flip);

let button = document.querySelector("button");

button.addEventListener("click", function() {
  // get the current state (before we make changes)
  let state = Flip.getState(element, "backgroundColor");
  
  // now make our changes
  element.classList.toggle("absolute");
  element.innerText = element.classList.contains("absolute") ?  "absolute" : "relative";
  
  // "FLIP" animate from that previous state. 
  Flip.from(state, {
    duration: 1,
    ease: "power1.inOut",
    spin: 2,
  });
  
});
</script></body></html>

<div class="container">
  <div id="element">
    relative
  </div>

  <div id="absolute-marker"></div>

  <button>Change the position</button>
</div>

html,
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

.container {
  position: relative;
  width: 90vw;
  height: 90vh;
  max-width: 700px;
  max-height: 700px;
  border-radius: 9px;
/*   border: solid 2px red; */
}

#element {
  background: var(--color-ui-gradient-background);
  border-radius: 15px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-just-black);
  border: solid 2px transparent;
}

#element.absolute,
#absolute-marker {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

#absolute-marker {
  width: 100px;
  height: 100px;
  bottom: 30px;
  right: 30px;
  border-radius: 10px;
  outline: dashed 2px var(--color-surface-white);
  z-index: -1;
  outline-offset: 0.5rem;
}

button {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

gsap.registerPlugin(Flip);

let button = document.querySelector("button");

button.addEventListener("click", function() {
  // get the current state (before we make changes)
  let state = Flip.getState(element, "backgroundColor");
  
  // now make our changes
  element.classList.toggle("absolute");
  element.innerText = element.classList.contains("absolute") ?  "absolute" : "relative";
  
  // "FLIP" animate from that previous state. 
  Flip.from(state, {
    duration: 1,
    ease: "power1.inOut",
    spin: 2,
  });
  
});