Circular Bezier

Developer
Rodrigo Hernando
Size
2,696 Kb
Views
14,168
  1. Circular Bezier Previews
  2. Circular Bezier HTML Codes
  3. Circular Bezier CSS Codes
  4. Circular Bezier JS Codes

How do I make an circular bezier?

Animate an object trough a circular bezier using a simple bezier generated with GSAP's bezier plugin and a quadratic bezier also generated with the plugin.. What is a circular bezier? How do you make a circular bezier? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.

Circular Bezier Previews
IQ Test

Circular Bezier - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circular Bezier</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <button id="btn1">Tween Simple Bezier</button> <button id="btn2">Tween Simple Bezier Curviness 1.5</button> <button id="btn3">Tween Quadratic Bezier</button>
</div>
<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3; background:#fff;margin-top:24.5px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<div>
<canvas id="myCanvas2" width="220" height="220" style="border:1px solid #d3d3d3; background:#fff;margin-top:24.5px;">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<div class="div1" 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>

Circular Bezier - Script Codes CSS Codes

.div1, .div2{	width:20px;	height:20px;	position:absolute;	top:48px;	left:450px;	background:#00f;	border-radius:50%;
}
.div2, .div3{ width:20px; height:20px; position:absolute; top:60px; left:108px; border-radius:50%; background:#F00;
}
.div3{ top:310px;
}

Circular Bezier - Script Codes JS Codes

$(document).ready(function(){
var btn1 = $("button#btn1"), btn2 = $("button#btn2"), btn3 = $("button#btn3"), div1 = $("div#div1"), div2 = $("div#div2"), div3 = $("div#div3"), tn1 = TweenMax.to([div1,div2,div3], 2, {bezier:[{x:100, y:100}, {x:0, y:200}, {x:-100, y:100}, {x:0, y:0}]/*bezier end*/, ease:Linear.easeNone, paused:true}), tn2 = TweenMax.to([div1,div2,div3], 2, {bezier:{curviness:1.5, values:[{x:100, y:100}, {x:0, y:200}, {x:-100, y:100}, {x:0, y:0}]}/*bezier end*/, ease:Linear.easeNone, paused:true}), tn3 = TweenMax.to([div1,div2,div3], 2, {bezier:{type:'quadratic', values:[/*p1*/{x:0, y:0},{x:100, y:0},{x:100, y:100}, /*p2*/{x:100, y:200},{x:0, y:200}, /*p3*/{x:-100, y:200},{x:-100, y:100}, /*p4*/{x:-100, y:0},{x:0, y:0}]}/*bezier end*/, ease:Linear.easeNone, paused:true});
btn1.click(function()
{	tn1.play(0);
});
btn2.click(function()
{	tn2.play(0);
});
btn3.click(function()
{ tn3.play(0);
});
});
/*CANVAS ELEMENT*/
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(110,10);
ctx.quadraticCurveTo(210,10,210,110);
ctx.quadraticCurveTo(210,210,110,210);
ctx.quadraticCurveTo(10,210,10,110);
ctx.quadraticCurveTo(10,10,110,10);
ctx.strokeStyle = '#000';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(110,10);
ctx.arc(110, 10, 5, 0, Math.PI*2, true);
ctx.fillStyle = '#000';
ctx.fill();
ctx.beginPath();
ctx.moveTo(210,110);
ctx.arc(210, 110, 5, 0, Math.PI*2, true);
ctx.fillStyle = '#000';
ctx.fill();
ctx.beginPath();
ctx.moveTo(110,210);
ctx.arc(110, 210, 5, 0, Math.PI*2, true);
ctx.fillStyle = '#000';
ctx.fill();
ctx.beginPath();
ctx.moveTo(10,110);
ctx.arc(10, 110, 5, 0, Math.PI*2, true);
ctx.fillStyle = '#000';
ctx.fill();
/*SECOND CANVAS*/
var c2 = document.getElementById("myCanvas2");
var ctx2 = c2.getContext("2d");
ctx2.beginPath();
ctx2.arc(110, 110, 100, 0, Math.PI*2, true);
ctx2.strokeStyle = '#000';
ctx2.stroke();
ctx2.beginPath();
ctx2.moveTo(110,10);
ctx2.arc(110, 10, 5, 0, Math.PI*2, true);
ctx2.fillStyle = '#000';
ctx2.fill();
ctx2.beginPath();
ctx2.moveTo(210,110);
ctx2.arc(210, 110, 5, 0, Math.PI*2, true);
ctx2.fillStyle = '#000';
ctx2.fill();
ctx2.beginPath();
ctx2.moveTo(110,210);
ctx2.arc(110, 210, 5, 0, Math.PI*2, true);
ctx2.fillStyle = '#000';
ctx2.fill();
ctx2.beginPath();
ctx2.moveTo(10,110);
ctx2.arc(10, 110, 5, 0, Math.PI*2, true);
ctx2.fillStyle = '#000';
ctx2.fill();
Circular Bezier - Script Codes
Circular Bezier - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 3.5
Size 2,696 Kb
Views 14,168
Do you need developer help for Circular Bezier?

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
Greensock 3D Preloader Spinner
Simple scroll controlled animation
Simple Slider Powered by GreenSock
Auto scroll to element offset 2
Toggle Tween Direction
Greensock Draggable latest update
Circular Progress Bar
Cross-Browser Flip Card
Bezier Animation with straight paths
Create amazing sales emails 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!