Progressively reveal dots on a Bezier curve

Developer
GreenSock
Size
2,489 Kb
Views
48,552

How do I make an progressively reveal dots on a bezier curve?

Answers a question in the GreenSock forums: http://forums.greensock.com/topic/7251-plot-elements-and-or-draw-along-a-bezier-path/#entry27130. What is a progressively reveal dots on a bezier curve? How do you make a progressively reveal dots on a bezier curve? This script and codes were developed by GreenSock on 11 June 2022, Saturday.

Progressively reveal dots on a Bezier curve Previews
IQ Test

Progressively reveal dots on a Bezier curve - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Progressively reveal dots on a Bezier curve</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.4/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Progressively reveal dots on a Bezier curve - Script Codes CSS Codes

body { background-color: black;
}
.dot{	position: absolute;	width: 20px;	height: 20px;	background-color: #91e600;	border-radius: 50%;	visibility:hidden;
}

Progressively reveal dots on a Bezier curve - Script Codes JS Codes

$(window).ready(function() {	var quantity = 30, //number of dots	duration = 3, //duration (in seconds)	path = [{x:0, y:0}, {x:50, y:100}, {x:300, y:20}, {x:400, y:200}, {x:500, y:0}], //points on the path (BezierPlugin will plot a Bezier through these). Adjust however you please.	position = {x:path[0].x, y:[path[0].y]}, //tracks the current position, so we set it initially to the first node in the path. It's the target of the tween.	tween = TweenMax.to(position, quantity, {bezier:path, ease:Linear.easeNone}), //this does all the work of figuring out the positions over time.	tl = new TimelineMax({repeat:-1, yoyo:true}), //we'll use a TimelineMax to schedule things. You can then have total control of playback. pause(), resume(), reverse(), whatever.	i, dot;	//we can remove the first point on the path because the position is already there and we want to draw the Bezier from there through the other points	path.shift();	for (i = 0; i < quantity; i++) {	tween.time(i); //jumps to the appropriate time in the tween, causing position.x and position.y to be updated accordingly.	dot = $("<div />", {id:"dot"+i}).addClass("dot").css({left:position.x+"px", top:position.y+"px"}).appendTo("body"); //create a new dot, add the .dot class, set the position, and add it to the body.	tl.set(dot, {visibility:"visible"}, i * (duration / quantity)); //toggle the visibility on at the appropriate time.	}	});
Progressively reveal dots on a Bezier curve - Script Codes
Progressively reveal dots on a Bezier curve - Script Codes
Home Page Home
Developer GreenSock
Username GreenSock
Uploaded June 11, 2022
Rating 4
Size 2,489 Kb
Views 48,552
Do you need developer help for Progressively reveal dots on a Bezier curve?

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!

GreenSock (GreenSock) Script Codes
Name
Support Starter Pen
Easing
Club GreenSock Plugins
GreenSock Home Page Animation
Simple GSAP Demo for CSS3 Transitions Cage Match
GSPreloader
GSAP JS Banner Example
Independent Transforms
Basic Starter Pen
Basic Tween
Create amazing Facebook ads 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!