Draggable Stickers
A set of image stickers scattered over a hero section that users can freely drag around. Each sticker scales, rotates, and gains a drop-shadow on grab, then snaps back with a bouncy ease on release.
GSAPDraggableInteractiveFun
Setup — External Scripts
GSAP CDN
html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>Draggable CDN
html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/Draggable.min.js"></script>Code
index.html
html
<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>styles.css
css
.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;
}
}script.js
javascript
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,
dragResistance: 0.1,
onPress() {
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() {
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
});
}
});
});
}
document.addEventListener("DOMContentLoaded", () => {
initDraggableStickers();
});Notes
- •The wrapper has `pointer-events: none` so clicks pass through to page content; individual sticker items re-enable pointer events with `pointer-events: auto`.
- •The `onPress` callback randomises the rotation on every grab using `gsap.utils.random`, so stickers never snap to the same angle twice.
- •`dragResistance: 0.1` gives a slight lag that makes the stickers feel physical without being frustrating — tune this between 0 and 1 to taste.
Guide
Wrapper Element
Use a container with data-sticker="wrap". This element defines the draggable bounds — stickers will be constrained within it. You can swap this for window if you want stickers to roam the full viewport.
Sticker Items
Inside the wrapper, add one or more elements with data-sticker="item". These can be images, divs, or any element. Position them with absolute CSS classes (is--1 through is--8 in the example).
Customising drag feel
The `dragResistance` option (0–1) controls how much the sticker resists movement — higher values make dragging feel heavier. Explore the full Draggable docs for further config options like `inertia`, `snap`, and `edgeResistance`.