GSAP - Fun with Cycle and Bezier 2

Developer
Pedro Tavares
Size
4,195 Kb
Views
10,120
  1. GSAP - Fun with Cycle and Bezier 2 Previews
  2. GSAP - Fun with Cycle and Bezier 2 HTML Codes
  3. GSAP - Fun with Cycle and Bezier 2 CSS Codes
  4. GSAP - Fun with Cycle and Bezier 2 JS Codes

How do I make an gsap - fun with cycle and bezier 2?

What is a gsap - fun with cycle and bezier 2? How do you make a gsap - fun with cycle and bezier 2? This script and codes were developed by Pedro Tavares on 01 December 2022, Thursday.

GSAP - Fun with Cycle and Bezier 2 Previews
IQ Test

GSAP - Fun with Cycle and Bezier 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GSAP - Fun with Cycle and Bezier 2</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/rwxpbb.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container" class="container"> <svg id="particles"></svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

GSAP - Fun with Cycle and Bezier 2 - Script Codes CSS Codes

/* **************************************** */
/* Default CSS styles being imported from:
/* https://codepen.io/dipscom/pen/RWXPBB
/* **************************************** */
.container { padding: 0;
}
/* ****************** */
/* Notes and reminders
/* ****************** */
/* ****************** */
/* Local CSS styling
/* ****************** */
svg { margin: 0; display: block; width: 100%; height: 600px;
}

GSAP - Fun with Cycle and Bezier 2 - Script Codes JS Codes

var container = document.getElementById("container");
var holder = document.getElementById("particles");
var hW = container.offsetWidth;
var hH = container.offsetHeight;
var particles = [];
var ttlParticles = 126;
var minSize = 2;
var maxSize = 20;
var hue = 0;
var hueStep = 360 / ttlParticles;
// Create a bunch of circles to animate
for(var i=0; i < ttlParticles; i++) { var dot = document.createElementNS(holder.namespaceURI, 'ellipse'); // Place all the dots at the center of the SVG dot.setAttribute('cx',(hW*0.5)); dot.setAttribute('cy',(hH*0.5)); // Initial radius of the elipse does not matter, is only a placeholder dot.setAttribute('rx',10); dot.setAttribute('ry',10); // Give each a random color dot.setAttribute('fill', getColor()); dot.setAttribute('class', 'dot'); // Add the circle into an array for later manipulation particles.push(dot); // Then add it to the holder SVG holder.appendChild(dot);
}
// Reorder the circles, so that the ones that are on top (created last) animate first
particles.reverse();
//
// Move each particle
var tl = new TimelineLite({onComplete:loop});
function buildTL() { tl.add("Start") // We have to set the radius to 0 right at the start .set('.dot', {attr:{rx:0, ry:0}}) // Go somewhere random from the center .staggerTo(particles, 1, { ease:Power4.easeInOut, transformOrigin:"center", autoAlpha:1, rotation:"+=720", cycle:{ x:function() { return randomFloat(-(hW*0.5 - 20), (hW*0.5 - 20)); }, y:function() { return randomFloat(-(hH*0.5 - 20), (hH*0.5 - 20)); }, attr:function() { return getRadius(); } } }, 0.01, "Start") .add("DotsOut") // Now, go back to the center .staggerTo('.dot', 6, { ease:Power2.easeInOut, transformOrigin:"center", cycle:{ bezier:getBezierArray(Math.ceil(randomFloat(3,9))) } }, 0.05, "DotsOut") .staggerTo('.dot', 1, { ease:Power2.easeInOut, attr:{ry:2} }, 0.05, "DotsOut") .staggerTo('.dot', 6, { ease:Power2.easeIn, attr:{rx:2}, }, 0.05, "DotsOut" ) .add("End") // A little flourish at the end .staggerTo('.dot', 1, { attr:{ rx:0, ry:0 }, cycle:{ ease:function(i) { return Back.easeIn.config(i*2); } } }, 0.01, "End") .staggerTo('.dot', 0.9, { autoAlpha:0, ease:Power2.easeOut }, 0.008, "End" )
};
/* Timeline related functions */
function loop() { // Kill the timeline, erasing all values and callback, ready for garbage collection tl.kill(); // Rebuild the animation so we can have a different motion at every repeat buildTL();
};
/* Helpers */
function getRadius() { var value = randomFloat(minSize, maxSize); return { rx: value, ry: value }
};
function getBezierArray(num) { // return an array that contains an array that contains a number of objects var bezierArr = []; for( var i=0; i < num; i++ ) { var obj = { curviness:1.25, autoRotate:true, values:getBezierPoints(randomFloat(3,6)) } bezierArr.push(obj); } return bezierArr;
};
function getBezierPoints(num) { var bezierPoints = []; for(var i=0; i < num; i++) { var bezierObj = { x:randomFloat(-(hW*0.5), (hW*0.5)), y:randomFloat(-(hH*0.5), (hH*0.5)) }; bezierPoints.push(bezierObj); } // At the end, move the dots back to their starting point bezierPoints.push({x:0, y:0}); return bezierPoints;
};
function randomFloat(min, max) { return min + Math.random()*(max-min);
};
function getColor() { var color = 'hsla(' + hue + ', 50%, 45%, 1)'; hue += hueStep; // console.log(color, " ", hueStep); return color;
}
GSAP - Fun with Cycle and Bezier 2 - Script Codes
GSAP - Fun with Cycle and Bezier 2 - Script Codes
Home Page Home
Developer Pedro Tavares
Username dipscom
Uploaded December 01, 2022
Rating 4
Size 4,195 Kb
Views 10,120
Do you need developer help for GSAP - Fun with Cycle and Bezier 2?

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!

Pedro Tavares (dipscom) Script Codes
Name
JavaScript Image Loader
Catch Me If You Can
Animated SVG Blur
Responsive Animated Moving Things
Buttons.js - Example
Mask Within Mask
Ghosty McGoat
Using Functions to Build a timeline - Broken
SVGText - Pattern Fill
SVG Grid Mask - With Color effect
Create amazing marketing copy 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!