Skip to content

Instantly share code, notes, and snippets.

@mkdizajn
Created April 13, 2021 13:51
Show Gist options
  • Save mkdizajn/f8b3bf90e0ad9e1de5fc4628c04e2b13 to your computer and use it in GitHub Desktop.
Save mkdizajn/f8b3bf90e0ad9e1de5fc4628c04e2b13 to your computer and use it in GitHub Desktop.
Draggable Move, Rotate and Scale
<div class="shop">
<img class="image" width="512" height="512" src="https://i.imgur.com/RKUiTEx.jpg" alt="">
<div class="outline"></div>
<div class="handle"></div>
</div>
console.clear();
var sh = document.querySelectorAll(".shop");
sh.forEach( function(el, i){
var container = el;
var outline = el.querySelector(".outline");
var handle = el.querySelector(".handle");
var image = el.querySelector(".image");
var origSize = { width: image.width, height: image.height };
var origVector = { x: origSize.width/ 2, y: -origSize.height / 2 };
// Length/magnitude of vector
var len1 = Math.sqrt(origVector.x * origVector.x + origVector.y * origVector.y);
// Normalized vector
var v1 = { x: origVector.x / len1, y: origVector.y / len1 };
// Angle of vector
var angle1 = Math.atan2(v1.y, v1.x);
var pars = [outline, handle, image, origSize, origVector, len1, v1, angle1];
TweenLite.set([container, image, handle, outline], {
xPercent: -50,
yPercent: -50
});
TweenLite.set(outline, {
width: origSize.width,
height: origSize.height
});
TweenLite.set(handle, {
x: origVector.x,
y: origVector.y
});
Draggable.create(container);
Draggable.create(handle, {
onPress: stopPropagation,
onDrag: transformItems(pars)
});
TweenLite.set(container, {
autoAlpha: 1
});
});
function transformItems( pars ) {
console.log( pars )
var outline = pars[ 0 ];
var me = pars[ 1 ];
var image = pars[ 2 ];
var origSize = pars[ 3 ];
var origVector = pars[ 4 ];
var len1 = pars[ 5 ];
var v1 = pars[ 6 ];
var angle1 = pars[ 7 ];
// Move vector
var v2 = {
x: me.x,
y: me.y
};
// Length of move vector
var len2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);
// Normalize move vector
if (len2) {
v2.x /= len2;
v2.y /= len2;
}
var angle = Math.atan2(v2.y, v2.x) - angle1;
var scale = len2 / len1;
console.log( pars[1] )
TweenLite.set(outline, {
width: origSize.width * scale,
height: origSize.height * scale,
rotation: angle + "_rad"
});
TweenLite.set(image, {
scale: scale,
rotation: angle + "_rad"
});
}
function stopPropagation(event) {
event.stopPropagation();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
overflow: hidden;
}
.container,
.outline,
.image,
.handle {
position: absolute;
top: 50%;
left: 50%;
}
.container {
visibility: hidden;
}
.outline {
border: 1px dashed black;
}
.handle {
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment