THEFIG06 · July 16, 2024 01:09 · Jul 16, 2024
diff --git a/draggable.markdown b/draggable.markdown
@@ -0,0 +1,7 @@
+Draggable
+---------
+
+
+A [Pen](https://codepen.io/GreenSock/pen/ExEwMEK) by [GSAP](https://codepen.io/GreenSock) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/ExEwMEK).
diff --git a/index.html b/index.html
@@ -0,0 +1,5 @@
+<div class="box green">drag me</div>
+
+<div class="box purple">flick me</div>
+
+<div class="box orange">spin me</div>
diff --git a/script.js b/script.js
@@ -0,0 +1,5 @@
+Draggable.create(".green", { bounds: "body" });
+
+Draggable.create(".purple", { inertia: true, bounds: "body" });
+
+Draggable.create(".orange", { inertia: true, type: "rotation", bounds: "body" });
diff --git a/scripts b/scripts
@@ -0,0 +1,3 @@
+<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
+<script src="https://unpkg.com/gsap@3/dist/Draggable.min.js"></script>
+<script src="https://assets.codepen.io/16327/InertiaPlugin.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,26 @@
+/* Global styles come from external css https://codepen.io/GreenSock/pen/gOWxmWG */
+
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  min-height: 100vh;
+  margin: 0;
+}
+
+.box {
+  display: block;
+    display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  color: var(--color-just-black)
+}
+
+h1 {
+  position: fixed;
+  width: 100%;
+  text-align: center;
+  top: 0;
+}
diff --git a/styles b/styles
@@ -0,0 +1 @@
+<link href="https://codepen.io/GreenSock/pen/gOWxmWG.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="https://codepen.io/GreenSock/pen/gOWxmWG.css" rel="stylesheet" />
No results found