Skip to content

Instantly share code, notes, and snippets.

@smartium

smartium/drag-and-spin-demo.markdown

Created October 25, 2021 06:02
Show Gist options
  • Save smartium/272b0ddc50cd229bcbcde6599d58bfdb to your computer and use it in GitHub Desktop.
Save smartium/272b0ddc50cd229bcbcde6599d58bfdb to your computer and use it in GitHub Desktop.
Download ZIP
Drag and Spin Demo
Raw
drag-and-spin-demo.markdown
Raw
index.html
<button id="rotation">console.log() rotation</button><br>
<img id="knob" src="https://greensock.com/wp-content/uploads/custom/draggable/img/knob.png" width="410" height="410">
Raw
script.js
console.clear();
//it doesn't get much easier than this ;)
const draggable = Draggable.create("#knob", {
type: "rotation",
inertia: true,
onDrag: function() {
console.log(this.rotation)
}
});
$("#rotation").click(function() {
console.log(gsap.getProperty("#knob", "rotation"), "from element");
console.log(Draggable.get("#knob").rotation, "from the Draggable");
});
/*
More info on Club GreenSock and other bonus plugins
https://www.greensock.com/club
*/
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/Draggable.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment