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 |
Simple Slider Powered by GreenSock | 4,573 Kb |
Draggable add element | 2,378 Kb |
Simple Drop Down Menu | 3,342 Kb |
Greensock Swipe Slides | 4,201 Kb |
Auto scroll to element offset 2 | 2,620 Kb |
Greensock Draggable latest update | 2,971 Kb |
Cross-Browser Flip Card | 2,396 Kb |
Transform Orign | 2,051 Kb |
Z Index Tween | 2,138 Kb |
Simple Interactive 3D Cube | 2,985 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 James Podles | Jpod | 2,656 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Slide like Mailbox | Hmps | 3,758 Kb |
Getting Started | Viblast | 1,500 Kb |
Cars going | Netoguimaraes | 1,699 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 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!