Bezier Animation with straight paths
How do I make an bezier animation with straight paths?
What is a bezier animation with straight paths? How do you make a bezier animation with straight paths? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.
Bezier Animation with straight paths - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bezier Animation with straight paths</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:#888; margin:0;
}
#div1
{ width:50px; height:50px; background:green; border-radius:5px; position:relative; border:solid 2px white; margin:10px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <button id="btn1">Play/Restart</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>
Bezier Animation with straight paths - Script Codes CSS Codes
body
{ background:#888; margin:0;
}
#div1
{ width:50px; height:50px; background:green; border-radius:5px; position:relative; border:solid 2px white; margin:10px;
}
Bezier Animation with straight paths - Script Codes JS Codes
var tl = new TimelineLite({paused:true}), btn1 = $("#btn1");
TweenLite.set("#div1", {x:700});
tl .to("#div1", 1, {x:400,y:75, ease:Linear.easeNone}) .to("#div1", 1, { bezier: { values:[{x:400,y:75}, {x:350,y:50}, {x:300,y:100}] }, ease:Linear.easeNone }) .to("#div1", 1,{x:0,y:0});
btn1.click(function()
{ tl.restart();
});
Developer | Rodrigo Hernando |
Username | rhernando |
Uploaded | November 18, 2022 |
Rating | 3 |
Size | 2,087 Kb |
Views | 26,312 |
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 |
Greensock 3D Preloader Spinner | 2,373 Kb |
Cross-Browser Flip Card | 2,396 Kb |
Spinning Images | 2,279 Kb |
Greensock Bezier Morph | 2,463 Kb |
Simple Interactive 3D Cube | 2,985 Kb |
Transform Orign | 2,051 Kb |
Auto scroll to element offset 2 | 2,620 Kb |
Draggable add element | 2,378 Kb |
Circular Bezier | 2,696 Kb |
Update tween progress with Draggable | 2,695 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 |
Rotate Demo | Agelber | 3,061 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Find The Penguin | Lelder | 2,212 Kb |
Webkit decolorize | Fivera | 1,675 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 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!