Bezier Animation with straight paths

Size
2,087 Kb
Views
26,312

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 Previews

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();
});
Bezier Animation with straight paths - Script Codes
Bezier Animation with straight paths - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 3
Size 2,087 Kb
Views 26,312
Do you need developer help for Bezier Animation with straight paths?

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
Create amazing art & images 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!