Update tween progress with Draggable

Developer
Rodrigo Hernando
Size
2,695 Kb
Views
44,528
  1. Update tween progress with Draggable Previews
  2. Update tween progress with Draggable HTML Codes
  3. Update tween progress with Draggable CSS Codes
  4. Update tween progress with Draggable JS Codes

How do I make an update tween progress with draggable?

A simple example on how to update a tween's progress value with a Draggable instance. All using Greensock Animation Platform.. What is a update tween progress with draggable? How do you make a update tween progress with draggable? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.

Update tween progress with Draggable Previews
IQ Test

Update tween progress with Draggable - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Update tween progress with Draggable</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Drag the blue square in order to change the green square's Tween progress</h2>
<div id="drag-wrapper"> <div class="drag-border"> <div id="drag-container"> <div class="drag-bar"></div> <div class="drag-elem"></div> </div> </div>
</div>
<div id="div1"></div>
<div id="log-div">Tween current progress: <span></span></div>
<div id="footer">
For more information visit <a href="https://www.greensock.com/draggable/" target="_blank">Greensock.com/Draggable</a>
</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.1/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Update tween progress with Draggable - Script Codes CSS Codes

body
{ background:#000; margin:0;	color:#fff;	font:18px bold; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h2
{ text-align:center;
}
#drag-wrapper
{ text-align:center; margin-top:20px;
}
.drag-border
{	border:solid 1px #fff;	width:450px;	border-radius:5px;	overflow:hidden;	position:relative;	left:50%;	margin-left:-225px;
}
#drag-container
{ width:450px;	background:#eee;
}
.drag-elem
{	position:relative;	background:#00f;	height:20px;	width:20px;	z-index:10;	border-radius:5px;
}
.drag-bar
{	height:20px;	background:#f0f;	width:0;	position:absolute;	z-index:5;	border-radius:5px;
}
#div1
{ width:100px; height:100px; position:relative; background:green; border:solid 1px; border-radius:10px; margin:20px;
}
#footer
{ position:absolute; bottom:20px; right:20px;	text-align:right;
}
a
{	color:#71b200;	text-decoration:none;	font-weight:bold;
}
a:hover
{	text-decoration:underline;
}

Update tween progress with Draggable - Script Codes JS Codes

var div1 = $("#div1"), dragBar = $(".drag-bar"), dragElem = $(".drag-elem"), dragContainer = $("#drag-container"), dragLimit = dragContainer.width() - dragElem.width(), logDiv = $("#log-div span"), tn = TweenLite.to(div1, 1, {left:300, rotation:360, paused:true, ease:Linear.easeNone, onUpdate:upFn}), tnProgress;
Draggable.create(dragElem, { type:'x', bounds:dragContainer, edgeResistance:1, onDrag:function() { tnProgress = ( Math.round( (this.x / dragLimit) * 1000) ) /1000; logDiv.html(tnProgress); tn.progress(tnProgress); TweenLite.set(dragBar, {width:this.x + 10}); }, onPress:function() { tn.pause(); }
});
function upFn() { var xPos = tn.progress() * dragLimit; tnProgress = ( Math.round( tn.progress() * 1000) ) /1000; logDiv.html(tnProgress); TweenLite.set(dragElem, {x:xPos}); TweenLite.set(dragBar, {width:xPos+10});
}
div1.click(function() { tn.play();
});
Update tween progress with Draggable - Script Codes
Update tween progress with Draggable - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 3.5
Size 2,695 Kb
Views 44,528
Do you need developer help for Update tween progress with Draggable?

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
Greensock Bezier Morph
GSAP Scramble Text Plugin
Circular Bezier
Transform Orign
Greensock Draggable latest update
Greensock 3D Preloader Spinner
Toggle Tween Direction
Simple Slider Powered by GreenSock
Draggable add element
Spinning Images
Create amazing marketing copy 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!