Toggle Tween Direction
How do I make an toggle tween direction?
Simple example of how the direction of a Tween/Timeline can be changed with a unique function.Powered by GreenSock Animation Platform.. What is a toggle tween direction? How do you make a toggle tween direction? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.
Toggle Tween Direction - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle Tween Direction</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body
{ background:black; color:white; font: 16px "Trebuchet MS"; margin:0;
}
h2
{ text-align:center;
}
button
{ padding:10px; border-radius:5px; margin:20px;
}
#div1
{ width:100px; height:100px; background:blue; position:relative; margin-left:20px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h2>Simple Example to toggle the direction of a Tween/Timeline<br> Powered by GreenSock Animation Platform</h2>
<button id="btn">Toggle Tween Direction</button>
<div id="div1"></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/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Toggle Tween Direction - Script Codes CSS Codes
body
{ background:black; color:white; font: 16px "Trebuchet MS"; margin:0;
}
h2
{ text-align:center;
}
button
{ padding:10px; border-radius:5px; margin:20px;
}
#div1
{ width:100px; height:100px; background:blue; position:relative; margin-left:20px;
}
Toggle Tween Direction - Script Codes JS Codes
var div1 = $("#div1"), btn = $("#btn"), t = TweenLite.to(div1, 1.5, { left:300, top:100, rotation:360, ease:Back.easeOut }).reversed(true);
function toggleDirection()
{ t.reversed( !t.reversed() );
}
btn.click(function(){ toggleDirection();
});
Developer | Rodrigo Hernando |
Username | rhernando |
Uploaded | November 18, 2022 |
Rating | 3 |
Size | 2,325 Kb |
Views | 18,216 |
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 |
Circular Bezier | 2,696 Kb |
Simple scroll controlled animation | 2,229 Kb |
Greensock Draggable latest update | 2,971 Kb |
Simple Slider Powered by GreenSock | 4,573 Kb |
Transform Orign | 2,051 Kb |
Bezier Animation with straight paths | 2,087 Kb |
Auto scroll to element offset | 2,549 Kb |
Z Index Tween | 2,138 Kb |
Simple Interactive 3D Cube | 2,985 Kb |
Greensock 3D Preloader Spinner | 2,373 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 |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
Planet Awesome | Bartuc | 3,554 Kb |
Experiment | Toddmoy | 2,849 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 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!