모션·인터랙션 / GSAP / MotionPath · ScrollTrigger

MotionPath Waypoints

스크롤 진행에 맞춰 요소가 정해진 경로와 지점을 따라 이동합니다.

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

실행용 통합 HTML · 공식 GSAP 3.15.0

<!doctype html>
<!-- Archived from GSAP Demo Hub / motionpath-waypoints
Original editor: https://codepen.io/GreenSock/pen/raerLaK
HTML/CSS/JS source panels are preserved separately. Runtime GSAP: 3.15.0 official distribution. -->
<html lang="en" class=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>MotionPath Waypoints</title>

<link rel="stylesheet" href="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/xxmzBrw.css">
<style>
body {
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.spacer {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  position: relative;
  height: 300vh;
}

.container {
  position: absolute;
  width: 140px;
  height: 140px;
  border: 2px dashed var(--color-surface50);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Start point */
.initial {
  left: 60%;
  top: 5%;
}

/* Down-the-page markers */
.second {
  left: 10%;
  top: 25%;
}

.third {
  right: 10%;
  top: 45%;
}

.fourth {
  left: 20%;
  top: 65%;
}

.fifth {
  left: 60%;
  top: 80%;
}

.sixth {
  left: 15%;
  top: 95%;
}

.marker {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

.box {
  width: 100px;
  height: 100px;
  z-index: 10;
  border-radius: 10px;
  background-image: url("https://assets.codepen.io/16327/flair-26.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

</style></head><body>
<div class="spacer">scroll down</div>

<div class="main">
  <div class="container initial">
    <div class="box"></div>
  </div>

  <div class="container second">
    <div class="marker"></div>
  </div>
  <div class="container third">
    <div class="marker"></div>
  </div>
  <div class="container fourth">
    <div class="marker"></div>
  </div>
  <div class="container fifth">
    <div class="marker"></div>
  </div>
  <div class="container sixth">
    <div class="marker"></div>
  </div>
</div>

<div class="spacer final"></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-ScrollTrigger.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-MotionPathPlugin.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-MotionPathHelper.min.js"></script>
<script>
console.clear();
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);

let ctx;

function createTimeline() {
  ctx && ctx.revert();

  ctx = gsap.context(() => {
    const box = document.querySelector(".box");
    const boxStartRect = box.getBoundingClientRect();

    // All containers except the first
    const containers = gsap.utils.toArray(".container:not(.initial)");

    // grab the points to animate between
    const points = containers.map((container) => {
      const marker = container.querySelector(".marker") || container;
      const r = marker.getBoundingClientRect();

      return {
        x: r.left + r.width / 2 - (boxStartRect.left + boxStartRect.width / 2),
        y: r.top + r.height / 2 - (boxStartRect.top + boxStartRect.height / 2)
      };
    });

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".container.initial",
        start: "clamp(top center)",
        endTrigger: ".final",
        end: "clamp(top center)",
        scrub: 1
      }
    });

    tl.to(".box", {
      duration: 1,
      ease: "none",
      motionPath: {
        path: points, // array like - [{x:100, y:50}, {x:200, y:0}, {x:300, y:100}]
        curviness: 1.5 // adjust how curvy the path is, default is 1, 2 is more curvy
      }
    });
  });
}

createTimeline();
window.addEventListener("resize", createTimeline);

</script>
</body></html>

원본 HTML

<div class="spacer">scroll down</div>

<div class="main">
  <div class="container initial">
    <div class="box"></div>
  </div>

  <div class="container second">
    <div class="marker"></div>
  </div>
  <div class="container third">
    <div class="marker"></div>
  </div>
  <div class="container fourth">
    <div class="marker"></div>
  </div>
  <div class="container fifth">
    <div class="marker"></div>
  </div>
  <div class="container sixth">
    <div class="marker"></div>
  </div>
</div>

<div class="spacer final"></div>

원본 CSS

body {
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.spacer {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  position: relative;
  height: 300vh;
}

.container {
  position: absolute;
  width: 140px;
  height: 140px;
  border: 2px dashed var(--color-surface50);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Start point */
.initial {
  left: 60%;
  top: 5%;
}

/* Down-the-page markers */
.second {
  left: 10%;
  top: 25%;
}

.third {
  right: 10%;
  top: 45%;
}

.fourth {
  left: 20%;
  top: 65%;
}

.fifth {
  left: 60%;
  top: 80%;
}

.sixth {
  left: 15%;
  top: 95%;
}

.marker {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

.box {
  width: 100px;
  height: 100px;
  z-index: 10;
  border-radius: 10px;
  background-image: url("https://assets.codepen.io/16327/flair-26.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

원본 JavaScript

console.clear();
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);

let ctx;

function createTimeline() {
  ctx && ctx.revert();

  ctx = gsap.context(() => {
    const box = document.querySelector(".box");
    const boxStartRect = box.getBoundingClientRect();

    // All containers except the first
    const containers = gsap.utils.toArray(".container:not(.initial)");

    // grab the points to animate between
    const points = containers.map((container) => {
      const marker = container.querySelector(".marker") || container;
      const r = marker.getBoundingClientRect();

      return {
        x: r.left + r.width / 2 - (boxStartRect.left + boxStartRect.width / 2),
        y: r.top + r.height / 2 - (boxStartRect.top + boxStartRect.height / 2)
      };
    });

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".container.initial",
        start: "clamp(top center)",
        endTrigger: ".final",
        end: "clamp(top center)",
        scrub: 1
      }
    });

    tl.to(".box", {
      duration: 1,
      ease: "none",
      motionPath: {
        path: points, // array like - [{x:100, y:50}, {x:200, y:0}, {x:300, y:100}]
        curviness: 1.5 // adjust how curvy the path is, default is 1, 2 is more curvy
      }
    });
  });
}

createTimeline();
window.addEventListener("resize", createTimeline);