Progressively reveal dots on a Bezier curve
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 - 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. } });
Developer | GreenSock |
Username | GreenSock |
Uploaded | June 11, 2022 |
Rating | 4 |
Size | 2,489 Kb |
Views | 48,576 |
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 |
Advanced SVG Shape Morphing | 6,342 Kb |
GSPreloader | 3,864 Kb |
GSAP JS Banner Example | 6,467 Kb |
Hide rerun on embedded pens | 1,392 Kb |
SVG progressive line render | 3,514 Kb |
Easing | 2,043 Kb |
Basic Starter Pen | 2,160 Kb |
Support Starter Pen | 2,157 Kb |
Intro TimelineLite - finished | 3,311 Kb |
Club GreenSock Plugins | 3,810 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 |
Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
Alumni ECA | MatheusLima92 | 3,777 Kb |
Mini Profile | Frytyler | 3,828 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Apex Calculator | Michaelwnelson | 2,370 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!