Greensock Draggable latest update

Developer
Rodrigo Hernando
Size
2,971 Kb
Views
12,144
  1. Greensock Draggable latest update Previews
  2. Greensock Draggable latest update HTML Codes
  3. Greensock Draggable latest update CSS Codes
  4. Greensock Draggable latest update JS Codes

How do I make an greensock draggable latest update?

Simple example of the latest update of Greensock's Draggable tool.See how it works in transformed objects. In this case only the parent is transformed but it can work with the child element being transformed too.. What is a greensock draggable latest update? How do you make a greensock draggable latest update? This script and codes were developed by Rodrigo Hernando on 30 November 2022, Wednesday.

Greensock Draggable latest update Previews
IQ Test

Greensock Draggable latest update - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Greensock Draggable latest update</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="intro-text">	<div>Greensock's Draggable tool latest update now works on objects that have CSS transform applied to them, good luck trying to do this with another tool. Play around and see it for yourself.</div>	<div style="text-align:right;">For more information visit: <a href="https://greensock.com">Greensock.com</a></div>
</div>
<div id="log-div">	Current position -> X: <span id="childX">0</span> -- Y: <span id="childY">0</span>
</div>
<div>	<!-- rotate buttons -->	<button id="rotate1">Rotate Parent to 45</button><button id="rotate2">Rotate Parent to 180</button> <button id="rotate3">Rotate Parent to 0</button><br>	<!-- scale buttons -->	<button id="scale1">Scale Parent to 1.5</button><button id="scale2">Scale Parent to 0.5</button><button id="scale3">Scale Parent to 1</button><br>	<!-- skew buttons -->	<button id="skew1">Skew X Parent 45deg</button><button id="skew2">Skew X Parent -45deg</button>	<button id="skew3">Skew Y Parent 45deg</button><button id="skew4">Skew Y Parent -45deg</button><button id="skew5">Skew Parent to 0</button><br>	<!-- 3D rotation buttons -->	<button id="rotateX1">RotateX Parent 45 deg</button><button id="rotateX2">RotateX Parent -45 deg</button><button id="rotateX3">RotateX Parent to 0</button>	<button id="rotateY1">RotateY Parent 45 deg</button><button id="rotateY2">RotateY Parent -45 deg</button><button id="rotateY3">RotateY Parent to 0</button>
</div>
<div id="wrapper">	<div id="parent">	<div id="div1"></div>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/utils/Draggable.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Greensock Draggable latest update - Script Codes CSS Codes

body
{	background: #000;	font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
button
{	padding: 2px 5px;
}
a
{	color:#8DDF00;	font-weight: bold;
}
#intro-text
{	color: white;	padding:5px 20px;	border: solid 1px white;	border-radius: 10px;	margin-bottom: 10px;
}
#log-div
{	padding: 5px;	border: solid 1px white;	width:70%;	color: white;	border-radius: 5px;	margin-bottom: 10px;
}
#wrapper
{	width: 600px;	height: 400px;	left:50%;	margin-left: -300px;	margin-top: 100px;	position: relative;
}
#parent
{	width:600px;	height: 400px;	background: #00f;	position: relative;	border-radius: 10px;	border:solid 2px white;	overflow: hidden;
}
#div1
{	width: 100px;	height: 100px;	background: #8DDF00;	position: relative;	border-radius: 10px;
}

Greensock Draggable latest update - Script Codes JS Codes

var rotate1 = $("#rotate1"),	rotate2 = $("#rotate2"),	rotate3 = $("#rotate3"),	// Scale buttons	scale1 = $("#scale1"),	scale2 = $("#scale2"),	scale3 = $("#scale3"),	//skew buttons	skew1 = $("#skew1"),	skew2 = $("#skew2"),	skew3 = $("#skew3"),	skew4 = $("#skew4"),	skew5 = $("#skew5"),	//3D rotation buttons	rotateX1 = $("#rotateX1"),	rotateX2 = $("#rotateX2"),	rotateX3 = $("#rotateX3"),	rotateY1 = $("#rotateY1"),	rotateY2 = $("#rotateY2"),	rotateY3 = $("#rotateY3"),	wrapper = $("#wrapper"),	parent = $("#parent"),	div1 = $("#div1"),	childX = $("#childX"),	childY = $("#childY");
//set wrapper perspective
TweenLite.set(wrapper,{perspective:500});
/** rotation buttons events **/
rotate1.click(function(e)
{	TweenLite.to(parent, 1,{rotation:45});
});
rotate2.click(function(e)
{	TweenLite.to(parent, 1,{rotation:180});
});
rotate3.click(function(e)
{	TweenLite.to(parent, 1,{rotation:0});
});
/** scale buttons events **/
scale1.click(function(e)
{	TweenLite.to(parent, 1,{scale:1.5});
});
scale2.click(function(e)
{	TweenLite.to(parent, 1,{scale:0.5});
});
scale3.click(function(e)
{	TweenLite.to(parent, 1,{scale:1});
});
/** skew buttons events **/
skew1.click(function(e)
{	TweenLite.to(parent, 1,{skewX:45});
});
skew2.click(function(e)
{	TweenLite.to(parent, 1,{skewX:-45});
});
skew3.click(function(e)
{	TweenLite.to(parent, 1,{skewY:45});
});
skew4.click(function(e)
{	TweenLite.to(parent, 1,{skewY:-45});
});
skew5.click(function(e)
{	TweenLite.to(parent, 1,{skewX:0});
});
/** 3D rotation buttons events **/
rotateX1.click(function(e)
{	TweenLite.to(parent, 1,{rotationX:45});
});
rotateX2.click(function(e)
{	TweenLite.to(parent, 1,{rotationX:-45});
});
rotateX3.click(function(e)
{	TweenLite.to(parent, 1,{rotationX:0});
});
rotateY1.click(function(e)
{	TweenLite.to(parent, 1,{rotationY:45});
});
rotateY2.click(function(e)
{	TweenLite.to(parent, 1,{rotationY:-45});
});
rotateY3.click(function(e)
{	TweenLite.to(parent, 1,{rotationY:0});
});
/** draggable instance **/
Draggable.create(div1,
{	type:'x,y',	bounds:parent,	edgeResistance:1,	onDrag:function()	{	childX.html(this.x);	childY.html(this.y);	}
});
Greensock Draggable latest update - Script Codes
Greensock Draggable latest update - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 30, 2022
Rating 3.5
Size 2,971 Kb
Views 12,144
Do you need developer help for Greensock Draggable latest update?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rodrigo Hernando (rhernando) Script Codes
Name
Draggable add element
Spinning Images
Circular Bezier
Cross-Browser Flip Card
Simple Interactive 3D Cube
Update tween progress with Draggable
GSAP Scramble Text Plugin
Transform Orign
Auto scroll to element offset
Auto scroll to element offset 2
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!