Draggable Stickers

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/Draggable.min.js"></script>

<div class="sticker-container">
  <div class="sticker-text-wrap">
    <h1 class="sticker-heading">A bunch of fun stickers you can drag around!</h1>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 345 23" fill="none" class="sticker-heading-underline">
      <path d="M319.527 13.7592C307.316 13.7592 295.106 13.9172 282.896 13.7162C273.105 13.5582 263.314 12.7108 253.509 12.6103C245.035 12.5241 236.503 12.5528 228.087 13.4433C210.408 15.296 192.816 18.0391 175.123 19.7769C166.606 20.6099 158.275 19.2168 149.973 15.9136C136.432 10.5278 122.389 13.1273 108.604 15.9423C100.56 17.5795 92.5867 19.5472 84.542 21.0839C77.3991 22.4483 71.0436 21.1701 65.2462 16.0141C59.406 10.815 51.8766 12.1076 45.1202 13.7018C35.3006 15.9997 25.6957 19.2312 16.0335 22.1898C9.97849 24.0425 4.51039 22.8217 0.817287 17.4503C-0.399434 15.6838 -0.0988275 12.2369 0.688463 9.98202C1.01769 9.03413 4.9398 8.21547 6.34261 8.97666C10.823 11.4038 14.7451 9.75224 18.9106 8.51711C31.1637 4.88351 43.4455 0.991394 56.4286 2.09727C60.637 2.45632 65.418 3.43295 68.6817 5.83141C75.3093 10.7145 82.1229 9.7953 89.2085 8.57452C101.419 6.4633 113.572 3.97871 125.825 2.19782C134.943 0.876508 143.904 2.0111 152.664 5.4149C163.643 9.66607 175.166 8.57456 186.489 7.26762C205.413 5.08459 224.236 1.73821 243.203 0.201471C253.681 -0.64589 264.359 1.43659 274.966 1.70947C289.137 2.06852 303.323 1.86745 317.508 2.06852C324.823 2.16905 332.181 2.32705 339.438 3.16005C341.471 3.38984 344.434 5.83139 344.863 7.74155C345.736 11.5906 342.258 11.8635 339.366 12.0215C332.768 12.4092 326.169 12.8257 319.57 13.2422C319.57 13.4145 319.555 13.5869 319.541 13.7449L319.527 13.7592Z" fill="currentColor"></path>
    </svg>
  </div>
  <div data-sticker="wrap" class="sticker-img-wrap">
    <div data-sticker="item" class="sticker-item is--1"><img src="https://cdn.prod.website-files.com/6809e225eedf8074438fd360/6809f65316abba4d2d86303a_sticker-1.png" class="sticker-item-img"></div>
    <div data-sticker="item" class="sticker-item is--2"><img src="https://cdn.prod.website-files.com/6809e225eedf8074438fd360/6809f6538453af4a4fc6887f_sticker-2.png" class="sticker-item-img"></div>
    <div data-sticker="item" class="sticker-item is--3"><img src="https://cdn.prod.website-files.com/6809e225eedf8074438fd360/6809f65383ea927bfe6e637c_sticker-3.png" class="sticker-item-img"></div>
    <div data-sticker="item" class="sticker-item is--4"><img src="https://cdn.prod.website-files.com/6809e225eedf8074438fd360/6809f653b79dd23b6be0706b_sticker-4.png" class="sticker-item-img"></div>
    <div data-sticker="item" class="sticker-item is--5"><img src="https://cdn.prod.website-files.com/6809e225eedf8074438fd360/6809f653eedf8074439ec167_sticker-5.png" class="sticker-item-img"></div>
    <div data-sticker="item" class="sticker-item is--6"><img src="https://cdn.prod.website-files.com/6809e225eedf8074438fd360/6809f653987ac956c75ce500_sticker-6.png" class="sticker-item-img"></div>
    <div data-sticker="item" class="sticker-item is--7"><img src="https://cdn.prod.website-files.com/6809e225eedf8074438fd360/6809f654f0568f9fbc1c60ed_sticker-7.png" class="sticker-item-img"></div>
    <div data-sticker="item" class="sticker-item is--8"><img src="https://cdn.prod.website-files.com/6809e225eedf8074438fd360/6809f653b0d9943a759c257c_sticker-8.png" class="sticker-item-img"></div>
  </div>
</div>

.sticker-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.sticker-text-wrap {
  text-align: center;
  max-width: 50em;
  padding-left: 1.25em;
  padding-right: 1.25em;
  position: relative;
}

.sticker-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-family: PP Neue Corp Normal, Arial, sans-serif;
  font-size: 4.75em;
  font-weight: 700;
  line-height: 1;
  position: relative;
}

.sticker-img-wrap {
  z-index: 2;
  pointer-events: none;
  position: absolute;
  inset: 0%;
  overflow: clip;
}

.sticker-item {
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  width: 10vw;
  max-width: 9rem;
  height: 12vw;
  max-height: 10rem;
  display: flex;
  position: absolute;
}

.sticker-item.is--1 { top: 10%; left: 10%;}

.sticker-item.is--2 { top: 25%; right: 35%;}

.sticker-item.is--3 { bottom: 15%; left: 15%;}

.sticker-item.is--4 {bottom: 10%; left: 50%;}

.sticker-item.is--5 {top: 35%; left: 15%;}

.sticker-item.is--6 {bottom: 30%; right: 20%;}

.sticker-item.is--7 {top: 15%; right: 20%;}

.sticker-item.is--8 {bottom: 5%; right: 5%;}

.sticker-heading-underline {
  z-index: 0;
  color: #f10000;
  width: 40%;
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translate(-50%);
}

.sticker-item-img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

@media screen and (max-width: 767px) {
  .sticker-heading {
    font-size: 3em;
  }

  .sticker-item {
    width: 20vw;
    height: 24vw;
  }
}

gsap.registerPlugin(Draggable)

function initDraggableStickers() {
  const wrapper = document.querySelector('[data-sticker="wrap"]');
  const stickers = document.querySelectorAll('[data-sticker="item"]');
  if (!wrapper || !stickers.length) return;
  
  stickers.forEach(sticker => {
    Draggable.create(sticker, {
      bounds: wrapper, // you could change this to the full window for example
      dragResistance: 0.1, // number between 0-1, the higher this is, the harder the sticker resists
      onPress() {
        // Scale and rotate the sticker slightly as soon as user 'grabs' it
        gsap.to(this.target, {
          scale: 1.2,
          rotation: gsap.utils.random(-30, 30),
          filter: "drop-shadow(0px 10px 8px rgba(0,0,0,0.3))",
          duration: 0.1
        });
      },
      onRelease() {
        // Once user lets go, remove styling changes
        gsap.to(this.target, {
          scale: 1,
          rotation: 0,
          ease: "back.out(3)",
          filter: "drop-shadow(0px 0px 0px rgba(0,0,0,0))",
          duration: 0.2
        });
      }
    });
  });
  
}

// Initialize Draggable Stickers
document.addEventListener("DOMContentLoaded", () => {
  initDraggableStickers();
});