Greensock Draggable latest update
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 - 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); }
});
Developer | Rodrigo Hernando |
Username | rhernando |
Uploaded | November 30, 2022 |
Rating | 3.5 |
Size | 2,971 Kb |
Views | 12,144 |
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!
Name | Size |
Auto scroll to element offset 2 | 2,620 Kb |
Auto scroll to element offset | 2,549 Kb |
Greensock 3D Preloader Spinner | 2,373 Kb |
Circular Progress Bar | 4,985 Kb |
Update tween progress with Draggable | 2,695 Kb |
Simple Slider Powered by GreenSock | 4,573 Kb |
Cross-Browser Flip Card | 2,396 Kb |
Bezier Animation with straight paths | 2,087 Kb |
Simple Drop Down Menu | 3,342 Kb |
Draggable add element | 2,378 Kb |
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!
Name | Username | Size |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
RequestAnimationFrame | Martin-banks | 2,541 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Count up | Alanshortis | 2,391 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!