JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>
<canvas></canvas>
CSS
html, body {
margin: 0;
background-color: #000;
}
canvas {
display: block;
}
JavaScript
var lineWidth = 12,
lineColor = 0xf3a33f,
length = 100000,
currPoints = [],
destPoints = [],
lineArray = [],
duration = 1.4,
ease = Power4.easeInOut,
staggerFactor = .06;
function init() {
initScene();
initLines();
animateLines();
TweenLite.ticker.addEventListener('tick', render);
}
function animateLines() {
for (var i = 0; i < length; i += 1) {
TweenMax.fromTo(lineArray[i], duration, {
alpha: 0
}, {
delay: i * staggerFactor,
alpha: 1,
repeat: -1,
yoyo: true,
repeatDelay: duration * .5,
ease: ease
});
TweenMax.to(currPoints[i].moveTo, duration, {
delay: i * staggerFactor,
x: destPoints[i].moveTo.x,
y: destPoints[i].moveTo.y,
repeat: -1,
yoyo: true,
repeatDelay: duration * .5,
ease: ease
});
TweenMax.to(currPoints[i].lineTo, duration, {
delay: i * staggerFactor,
x: destPoints[i].lineTo.x,
y: destPoints[i].lineTo.y,
repeat: -1,
yoyo: true,
repeatDelay: duration * .5,
ease: ease
});
}
}
function initLines() {
var line;
for (var i = 0; i < length; i += 1) {
line = new PIXI.Graphics(true).lineStyle(4, 0xff0000);
if (i == 0) {
currPoints[i] = getPoint(getRandomInt(0, window.innerWidth), window.innerHeight, getRandomInt(0, window.innerWidth), 0);
destPoints[i] = getPoint(getRandomInt(0, window.innerWidth), window.innerHeight, getRandomInt(0, window.innerWidth), 0);
} else if (i == 1) {
currPoints[i] = getPoint(0, getRandomInt(0, window.innerHeight), window.innerWidth, getRandomInt(0, window.innerHeight));
destPoints[i] = getPoint(0, getRandomInt(0, window.innerHeight), window.innerWidth, getRandomInt(0, window.innerHeight));
...