cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <canvas id='canvas'></canvas>

            
          
!
            
              * { margin:0; padding:0; } 

html, body { width:100%; height:100%; }

#canvas { 
	display:block; 
	background: #7ECCE6;
}
            
          
!
            
              //DATA
const paletteOptions = {
	noFlip: {
		bg: [
			0X8ccfe4,
			0x6d80d6,
			0x5e4e7f,
			0xde97e4,
			0xf8a2b2,
			0xf8aa75,
			0xd8c672,
		],
		fg: [
			0x6569f6,
			0x663fbc,
			0xd757e3,
			0xfc4f6d,
			0xfd7e28,
			0xf1d24c,
		],
	},
	flip: {
		bg: [
			0X8ccfe4,
			0x6d80d6,
			0x5e4e7f,
			0xde97e4,
			0xf8a2b2,
			0xf8aa75,
			0xd8c672,
			0xfd7e28,
			0xfc4f6d,
			0xd757e3,
			0x6569f6,
			0x5cb7f7,
		],
		fg: [
			0x6569f6,
			0x663fbc,
			0xd757e3,
			0xfc4f6d,
			0xfd7e28,
			0xf1d24c,
			0xd8c672,
			0xf8aa75,
			0xf8a2b2,
			0xde97e4,
			0x5e4e7f,
			0x6d80d6,
		],
	},
	alternate: {
		bg: [
			0X8ccfe4,
			0x5cb7f7,
			0x5e4e7f,
			0x663FBC,
			0xDE97E4,
			0xFC4F6D,
			0XF8AA75,
		],
		fg: [
			0x6569f6,
			0x6d80d6,
			0XD757E3,
			0xde97e4,
			0XFD7E28,
			0XF8AA75,
			0XF1D34C,
		],
	},
}

const data = {
	palette: paletteOptions.alternate, //which sequence of color animations to use
	settings: {
		startColor: '#5050E6',
		animate: true,
		colorAnimTime: 5, //time to transition between colors in sec
		rotationAnimTime: 20, //time to rotate the blur around its circle in sec
		maxScaleChange: .3, //percentage to increase or decrease size of circle from starting scale
		minScale: .25, //scale in percentage from root circle size of 100 pixels
		maxScale: 2.25,
		randomScaling: false, //when false, animate to positions specified in motionSequence, else animate to random scale within minScale,maxScale, maxScaleChange (when relativeScaling is true)
		relativeScaling: false, //whether to scale relative to starting size or according to min, max
		thresholdScaling: false, //only will work if relativeScaling is turned off
		scaleThresholdMin: .75, //if an items current scale is under the minimum threshold...
		scaleThresholdMax: 1.5, //...animate it over the maximum, and v.v.
		allowContainerScaling: false, //if true, use containerScale to augment the overall scale of the animation
		containerScale: 1.25, //factor by which to scale the container to achieve overall cluster size relative to screen
		randomPositioning: false, //when false, animate to positions specified in motionSequence, else animate to random position within maxPositionChange
		maxPositionChange: 100, //max pixels to move circle each animation cycle from starting position
		allowInteractivity: false, //whether or not to make the animation respond to user input
		interactiveMode: null, //['shift','glow','zoom','rotate']
		shiftFactor: 100, //factor by which to exaggerate the movement of the container on mouse move
		shiftDirection: 1, //-1 to shift toward cursor, 1 to shift away
		glowColor: '#FFFFFF',
		glowAlpha: .25,
		unequalZooming: false, //when true, allows both x and y scaling
		zoomMin: 1,
		zoomMax: 1.5,
		rotationLimiter: 10, //container will rotate 1/x degrees each tick - higher the number, slower the rotation when interactiveMode rotate is set
		animateBlur: true, //when true, all circles will have a blur, and the opacity of these will be animated according to motionSequence
		animBlurThreshold: 1, //when animateBlur true, any cluster animating to a scale above animBlurThreshold will show its blur, and any below animBlurThreshold will hide blur
		mapAlpha: true, //when true, alpha values will be assigned based on scale - largest equals brightest. When false, any blur over threshold will be totally visible, and any blur under will be totally hidden
		ambientRotation: true, //when true, container will continuously spin, and utilize rotationLimiter to determine speed of rotation
	},
	clusters: [
		{
			name: 'cluster1',
			x: 37,
			y: 144,
			scale: 2.6,
			rotation: 180,
		},
		{
			name: 'cluster2',
			x: -30,
			y: -175,
			scale: 2,
			rotation: 90,
			direction: -1
		},
		{
			name: 'cluster3',
			x: 494,
			y: 0,
			scale: 1.6,
			rotation: 45,
			direction: -1,
		},
		{
			name: 'cluster4',
			x: 134,
			y: -381,
			scale: .4,
			rotation: 315,
		},
		{
			name: 'cluster5',
			x: 466,
			y: -359,
			scale: 1,
			rotation: 135,
		},
		{
			name: 'cluster6',
			x: 306,
			y: 345,
			scale: .6,
			rotation: 225,
			direction: -1,
		},
		{
			name: 'cluster7',
			x: -279,
			y: 58,
			scale: .5,
			rotation: 270,
		},
		{
			name: 'cluster8',
			x: -262,
			y: -421,
			scale: 1.4,
			rotation: 30,
			direction: -1,
		},
		{
			name: 'cluster9',
			x: -534,
			y: -59,
			scale: .8,
		},
		{
			name: 'cluster10',
			x: -184,
			y: 431,
			scale: 1.2,
			rotation: 315,
			direction: -1,
		},
	],
	clusterConnections: [
		{
			from: 1,
			to: 2,
		},
		{
			from: 1,
			to: 7,
		},
		{
			from: 1,
			to: 3,
		},
		{
			from: 1,
			to: 2,
		},
		{
			from: 1,
			to: 6,
		},
		{
			from: 1,
			to: 10,
		},
		{
			from: 1,
			to: 2,
		},
		{
			from: 10,
			to: 7,
		},
		{
			from: 10,
			to: 9,
		},
		{
			from: 7,
			to: 9,
		},
		{
			from: 7,
			to: 8,
		},
		{
			from: 1,
			to: 2,
		},
		{
			from: 2,
			to: 8,
		},
		{
			from: 1,
			to: 2,
		},
		{
			from: 3,
			to: 2,
		},
		{
			from: 3,
			to: 4,
		},
		{
			from: 3,
			to: 5,
		},
		{
			from: 3,
			to: 6,
		},
	],
	motionSequence: [
		[ //1
			{
				x: -86,
				y: 231,
				scale: 1.6,
			},
			{
				x: 119,
				y: -58,
				scale: 2.6,
			},
			{
				x: 552,
				y: 115,
				scale: .8,
			},
			{
				x: 182,
				y: -385,
				scale: 1.2,
			},
			{
				x: 514,
				y: -203,
				scale: .6,
			},
			{
				x: 214,
				y: 415,
				scale: 1.4,
			},
			{
				x: -302,
				y: -203,
				scale: 2,
			},
			{
				x: -84,
				y: -445,
				scale: .8,
			},
			{
				x: -567,
				y: 48,
				scale: .5,
			},
			{
				x: -346,
				y: 337,
				scale: .4,
			},
		],
		[ //2
			{
				x: 143,
				y: 255,
				scale: 1.2,
			},
			{
				x: -25,
				y: -155,
				scale: 1.4,
			},
			{
				x: 329,
				y: 38,
				scale: 1.6,
			},
			{
				x: 159,
				y: -381,
				scale: 2,
			},
			{
				x: 491,
				y: -239,
				scale: 1,
			},
			{
				x: 472,
				y: 380,
				scale: .4,
			},
			{
				x: -265,
				y: -59,
				scale: .8,
			},
			{
				x: -428,
				y: -330,
				scale: .5,
			},
			{
				x: -411,
				y: 223,
				scale: 2.6,
			},
			{
				x: -79,
				y: 451,
				scale: .6,
			},
		],
		[ //3
			{
				x: 349,
				y: 281,
				scale: 1.6,
			},
			{
				x: -217,
				y: -83,
				scale: .4,
			},
			{
				x: 171,
				y: -87,
				scale: 2.6,
			},
			{
				x: -271,
				y: -329,
				scale: .6,
			},
			{
				x: 199,
				y: -401,
				scale: 1.4,
			},
			{
				x: 541,
				y: -5,
				scale: 1,
			},
			{
				x: -207,
				y: 159,
				scale: 2,
			},
			{
				x: -551,
				y: -83,
				scale: .8,
			},
			{
				x: -231,
				y: 411,
				scale: 1.2,
			},
			{
				x: 80,
				y: 382,
				scale: .5,
			},
		],
		[ //4
			{
				x: 395,
				y: 61,
				scale: .6,
			},
			{
				x: -163,
				y: -31,
				scale: 1.6,
			},
			{
				x: 143,
				y: -191,
				scale: 2,
			},
			{
				x: -497,
				y: -261,
				scale: 1.2,
			},
			{
				x: -153,
				y: -445,
				scale: .4,
			},
			{
				x: 532,
				y: -232,
				scale: .5,
			},
			{
				x: 9,
				y: 201,
				scale: .8,
			},
			{
				x: -401,
				y: 283,
				scale: 2.6,
			},
			{
				x: -37,
				y: 425,
				scale: .8,
			},
			{
				x: 345,
				y: 383,
				scale: 1.4,
			},
		],
		[ //5
			{
				x: 517,
				y: -114,
				scale: 1.6,
			},
			{
				x: -427,
				y: 238,
				scale: 1.4,
			},
			{
				x: -82,
				y: -147,
				scale: 2.6,
			},
			{
				x: -567,
				y: -146,
				scale: .6,
			},
			{
				x: -237,
				y: -412,
				scale: 1.2,
			},
			{
				x: 307,
				y: -346,
				scale: .8,
			},
			{
				x: 86,
				y: 190,
				scale: 1.9,
			},
			{
				x: -147,
				y: 392,
				scale: .8,
			},
			{
				x: 232,
				y: 447,
				scale: .5,
			},
			{
				x: 467,
				y: 286,
				scale: .4,
			},
		],
		[ //6
			{
				x: 386,
				y: -230,
				scale: .8,
			},
			{
				x: -225,
				y: 23,
				scale: .5,
			},
			{
				x: -136,
				y: -220,
				scale: 1.6,
			},
			{
				x: -548,
				y: 112,
				scale: 1.4,
			},
			{
				x: -496,
				y: -272,
				scale: .4,
			},
			{
				x: 118,
				y: -388,
				scale: 1.2,
			},
			{
				x: 40,
				y: 118,
				scale: 2.6,
			},
			{
				x: -234,
				y: 378,
				scale: .6,
			},
			{
				x: 284,
				y: 398,
				scale: 1,
			},
			{
				x: 518,
				y: 86,
				scale: 2,
			},
		],
		[ //7
			{
				x: 179,
				y: -136,
				scale: 2,
			},
			{
				x: -53,
				y: 168,
				scale: 1.6,
			},
			{
				x: -195,
				y: -126,
				scale: 2.6,
			},
			{
				x: -443,
				y: 324,
				scale: 1,
			},
			{
				x: -571,
				y: 30,
				scale: 1.2,
			},
			{
				x: -144,
				y: -419,
				scale: .5,
			},
			{
				x: 209,
				y: 346,
				scale: .8,
			},
			{
				x: 29,
				y: 424,
				scale: .4,
			},
			{
				x: 523,
				y: 218,
				scale: 1.4,
			},
			{
				x: 601,
				y: -96,
				scale: .6,
			},
		],
	],		
}

//DOM
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let stage = new createjs.Stage('canvas');

//EASEL
let clusterContainer; //holds all clusters
let clusterTinter; //holds cluster container, tints fg
let bg;
let clustersArray = []; 
let linesArray = [];
let resizeTimer;

//ANIMATION
let tl,
	tl2,
	clusterColorTimeline; //timelines
let step = 1; //iterator for positions
const numClusters = data.clusters.length;

let sequence = 1;
const numSequences = data.motionSequence.length;

//INTERACTIVITY
let glow;
let rotationTween, rotateVal;

function init() { //once canvas is sized
	window.addEventListener('resize', handleResize, false);
	sizeCanvas();
	buildStage();
	buildGUI();

	const {animate,allowInteractivity,interactiveMode} = data.settings;

	if (animate){
		initAnimations();
	}

	if (allowInteractivity){
		initInteractivity(interactiveMode);
	}
}

function buildGUI(){
	const gui = new dat.GUI();
	const {settings} = data;
	const animFolder = gui.addFolder('Animation');
	const interactiveFolder = gui.addFolder('Interactivity');

	animFolder.add(settings, 'animate');
	animFolder.add(settings, 'colorAnimTime', 1, 10).step(1);
	animFolder.add(settings, 'rotationAnimTime', 5,50).step(1);
	animFolder.add(settings, 'maxScaleChange', .1,3).step(.1);
	animFolder.add(settings, 'minScale', .1,1).step(.1);
	animFolder.add(settings, 'maxScale', 1,3).step(.1);
	animFolder.add(settings, 'randomScaling');
	animFolder.add(settings, 'relativeScaling');
	animFolder.add(settings, 'thresholdScaling');
	animFolder.add(settings, 'scaleThresholdMin',.1,1).step(.1);
	animFolder.add(settings, 'scaleThresholdMax',1,3).step(.1);
	animFolder.add(settings, 'allowContainerScaling');
	animFolder.add(settings, 'containerScale',.1,3).step(.1);
	animFolder.add(settings, 'randomPositioning');
	animFolder.add(settings, 'maxPositionChange',10,500).step(10);
	interactiveFolder.add(settings, 'allowInteractivity');
	interactiveFolder.add(settings, 'interactiveMode',['choose','rotate','shift','glow','zoom']);
	interactiveFolder.add(settings, 'shiftFactor',10,500).step(10);
	interactiveFolder.add(settings, 'shiftDirection',{'Away' : 1, 'Toward': -1});
	interactiveFolder.addColor(settings, 'glowColor');
	interactiveFolder.add(settings, 'glowAlpha',.1,1).step(.1);
	interactiveFolder.add(settings, 'unequalZooming');
	interactiveFolder.add(settings, 'zoomMin',.1,1).step(.1);
	interactiveFolder.add(settings, 'zoomMax',1,2).step(.1);
	animFolder.add(settings, 'rotationLimiter',1,20).step(1);
	animFolder.add(settings, 'animateBlur');
	animFolder.add(settings, 'animBlurThreshold',.5,1.5).step(.1);
	animFolder.add(settings, 'mapAlpha');
	animFolder.add(settings, 'ambientRotation');
	
	const submitter = { Submit:function(){ clearCanvas() }};
	gui.add(submitter,'Submit');
}

function sizeCanvas() { //first step
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
}

function handleResize(){

	clearTimeout(resizeTimer);
		resizeTimer = setTimeout(clearCanvas,500);
}

function clearCanvas(){
	stage.removeAllChildren();
    stage.clear();
    TweenLite.ticker.removeEventListener('tick');
    TweenMax.killAll(true,true,true,true); //only available with TweenMax

    createjs.Ticker.reset();
    stage.enableDOMEvents(false);
    context.clearRect(0, 0, canvas.width, canvas.height);

    clustersArray = [];
    linesArray = [];

    //ANIMATION
	tl = tl2 = clusterColorTimeline = null;
	step = 1;
	sequence = 1;

    setTimeout(()=>{
    	sizeCanvas();
        buildStage();

        const {animate, interactiveMode, allowInteractivity} = data.settings;
        if (animate){
            initAnimations();
        }

        if (allowInteractivity){
			initInteractivity(interactiveMode);
		}
    },250);

    
}

function buildStage(){

	const {allowInteractivity,interactiveMode} = data.settings;
	buildBackground();
	buildClusterContainer();
	buildClusterLines();


	if (allowInteractivity && interactiveMode.includes('glow')){
		buildGlow();
	}
	stage.update();
}

function buildBackground(){
	bg = new createjs.Shape();
	bg.graphics.f('#7ECCE6').drawRect(0, 0, canvas.width, canvas.height);
	bg.name = 'bg';
	stage.addChild(bg);
}

function buildClusterContainer(){
	const { settings } = data;

	clusterTinter = new createjs.Container();
	clusterContainer = new createjs.Container();

	clusterContainer.x = canvas.width/2
	clusterContainer.y = canvas.height/2
	if (settings.allowContainerScaling){
		clusterContainer.scaleX = clusterContainer.scaleY = settings.containerScale;
	}

	clusterContainer.name = 'clusterContainer';
	buildClusters();
	clusterTinter.addChild(clusterContainer);
	stage.addChild(clusterTinter);


}

function buildClusters(){
	data.clusters.forEach((clusterData,i)=> {
	    const cluster = buildCluster(clusterData);
	    clusterContainer.addChild(cluster);
	    clustersArray.push(cluster);
	});
}

function buildCluster(params,i){

	const {x = 0,y = 0,scale = 1, blur = true, rotation = 0, name = `cluster${i}`} = params;
	const {settings} = data;

	const cluster = new createjs.Container();
	cluster.setTransform(x,y,scale,scale);
	cluster.name = name;
	
	const circle = buildCircle();
	cluster.addChild(circle);

	if (settings.animateBlur){
		const blur1 = buildBlur1();
		cluster.addChild(blur1);

		const blur2 = buildBlur2();
		cluster.addChild(blur2);

		if (!blur || settings.animateBlur && scale < settings.animBlurThreshold){
			blur1.alpha = 0;
			blur2.alpha = 0;
		}

		blur1.rotation = rotation;
		blur2.rotation = rotation;

	} else {
		if (blur){
			const blur1 = buildBlur1();
			cluster.addChild(blur1);

			const blur2 = buildBlur2();
			cluster.addChild(blur2);
		}
	}


	

	return cluster;
}

function buildCircle(fillColor = data.settings.startColor){
	const circle = new createjs.Shape();
	circle.graphics.beginFill(fillColor).drawCircle(0, 0, 50);
	circle.name = 'circle';
	return circle;
}

function buildBlur1(){
	const blur1 = buildCircle();
	blur1.setTransform(0,0.1,0.75,0.75,0,0,0,0,30.7);
	blur1.filters = [new createjs.BlurFilter(15, 15, 3)];
	blur1.cache(-52,-52,104,104);
	blur1.name = 'blur1';

	return blur1;
}

function buildBlur2(){
	const blur2 = buildCircle();
	blur2.setTransform(0,-0.2,1.5,1.5,0,0,0,0,16.2);
	blur2.filters = [new createjs.BlurFilter(60, 60, 2)];
	blur2.cache(-52,-52,104,104);
	blur2.name = 'blur2';

	return blur2;
}

function buildGlow(){
	const {glowColor, glowAlpha} = data.settings;

	glow = buildCircle(data.settings.glowColor);
	glow.filters = [new createjs.BlurFilter(15, 15, 3)];
	glow.cache(-52,-52,104,104);
	glow.alpha = glowAlpha;
	glow.name = 'glow';
	glow.x = -50;
	glow.y = -50;
}

function initAnimations(){
	TweenLite.ticker.addEventListener('tick', handleTick, stage); //update each time tweenlite updates
	initBackgroundAnimation();
	initClusterColorAnimation();
	initClusterAnimation();
}

function initInteractivity(interactiveMode){
	document.addEventListener('mousemove',handleMouseMove, false);
	const {settings} = data;
	if (settings.interactiveMode === 'glow'){
		initGlow();
	}
}

function handleTick(){
	const {settings} = data;

	if (settings.interactiveMode === 'rotate' && settings.allowInteractivity){
		updateRotation();
	} else if (settings.ambientRotation){
		updateAmbientRotation();
	}

	updateClusterLines();
	stage.update();
}

function handleMouseMove(event){
    const x = event.clientX;
    const y = event.clientY;
    handleInteractivity(x,y);
}

function handleInteractivity(x,y){

	const {settings} = data;
	switch (settings.interactiveMode){
		case 'rotate':
			handleRotate(x,y);
			break;
		case 'zoom':
			handleZoom(x,y);
			break;
		case 'glow':
			handleGlow(x,y);
			break;
		case 'shift':
			handleShift(x,y);
			break;
	}
}

function initGlow(){
	//stage.addChildAt(glow,1);
	stage.addChild(glow);
}

function mapRange(value, low1, high1, low2, high2) {
	return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

function handleRotate(x,y){
    const w = canvas.width;
    const midX = w / 2;
    const posX = x - midX;
    const {rotationLimiter} = data.settings;
    if (posX > 0){
    	rotateVal = -1/rotationLimiter;
    } else {
    	rotateVal = 1/rotationLimiter;
    }
}

function updateRotation(){
	clusterContainer.rotation = clusterContainer.rotation += rotateVal;
}

function updateAmbientRotation(){
	const {rotationLimiter} = data.settings;
	clusterContainer.rotation = clusterContainer.rotation += 1/rotationLimiter;
}

function handleZoom(x,y){

	const {zoomMin,zoomMax, unequalZooming} = data.settings

	const w = canvas.width;
    const midX = w / 2;
    const posX = x - midX;
    const absPosX = Math.abs(posX);
    const zoomValX = mapRange(absPosX,0,midX, zoomMax,zoomMin);

    let zoomValY;
    if (unequalZooming){
    	const h = canvas.height;
	    const midY = h / 2;
	    const posY = y - midY;
	    const absPosY = Math.abs(posY);
	    zoomValY = mapRange(absPosY,0,midY, zoomMax,zoomMin);
    } else {
    	zoomValY = zoomValX
    }
   
    TweenLite.to(clusterContainer, 0.3, {
		scaleX: zoomValX,
		scaleY: zoomValY,
	});
}

function handleGlow(x,y){
	TweenLite.to(glow, 0.3, {
		x: x,
		y: y,
	});
}

function handleShift(x,y){
	const {shiftFactor,shiftDirection} = data.settings;
    const w = canvas.width;
    const h = canvas.height;
    const midX = w / 2;
    const midY = h / 2;
    const posX = x - midX;
    const posY = y - midY;
    const valX = (posX / midX) * shiftFactor * shiftDirection;
    const valY = (posY / midY) * shiftFactor * shiftDirection;

    TweenLite.to(clusterContainer, 0.5, {
		regX: valX,
		regY: valY,
	});

    // clusterContainer.regX = valX;
    // clusterContainer.regY = valY;
}

function buildClusterLines(){
	const { clusterConnections, settings} = data;
	clusterConnections.forEach((connection,i)=> {
		const line = new createjs.Shape();
		const originCluster = clustersArray[connection.from - 1];
		const destinationCluster = clustersArray[connection.to - 1];

		line.graphics.s(settings.startColor).moveTo(originCluster.x,originCluster.y).lineTo(destinationCluster.x,destinationCluster.y);
		clusterContainer.addChildAt(line,0);
		const lineObj = {
			originCluster: originCluster,
			destinationCluster: destinationCluster,
			line: line
		}
		linesArray.push(lineObj);
	});
}

function updateClusterLines(){
	const {clusterConnections, settings} = data;
	linesArray.forEach((lineObj,i)=>{
		const {line,originCluster,destinationCluster} = lineObj;
		line.graphics.clear().s(settings.startColor).moveTo(originCluster.x,originCluster.y).lineTo(destinationCluster.x,destinationCluster.y);
	});
}

function initBackgroundAnimation(){

	const { palette, settings} = data;

	bg.cache(0, 0, canvas.width, canvas.height); //left, top, width, height
	

	tl2 = new TimelineMax({
		repeat:-1,
		yoyo: true,
	});

	palette.bg.forEach((paletteColor,i)=> {
	    tl2.add(TweenLite.to(bg, settings.colorAnimTime, {
			easel:{tint:paletteColor},
		}));
	});
}

function initClusterColorAnimation(){

	const { settings, palette, clusters } = data;
	const { colorAnimTime } = settings; 

	clusterColorTimeline = new TimelineMax({
		repeat:-1,
		yoyo: true,
	});

	palette.fg.forEach((paletteColor,i)=> {

		clusterTinter.cache(0,0,canvas.width,canvas.height);
		clusterColorTimeline.to(clusterTinter, colorAnimTime , {easel:{tint:paletteColor}}, `cluster${i}`)
	    
	});



}

function initClusterAnimation(){
	

	const { clusters, settings } = data;

	tl = new TimelineMax({
		repeat:-1,
		//yoyo: settings.randomPositioning ? false : true, //MH TODO: animation not repeating
	});

	clusters.forEach((clusterData,i)=>{
		const clusterObject = clustersArray[i];
		const isLast = i === numClusters-1;
		if (clusterData.blur !== false){
			const direction = clusterData.direction || 1
			rotateBlur(clusterObject,'tween1',direction);
		}
		scaleAndMove(clusterObject,clusterData,isLast,i);

	}) 

}

function rotateBlur(item,animGroup,direction = 1, scale = 1){
	const {settings} = data;
	tl.to(item, settings.rotationAnimTime, {
		rotation:360 * direction,
		repeat: -1,
	},animGroup);
	tl.to(item, settings.rotationAnimTime, {
		rotation:360 * direction,
		repeat: -1,
	},animGroup);
}

function scaleAndMove(item,clusterData,isLast,itemIndex){

	
	const {settings, motionSequence} = data;
	const animGroup = `tween${step}`;

	let newScale;

	if (settings.randomScaling){
		if (settings.relativeScaling){
			const scaleChange = generateRandom(0,settings.maxScaleChange,true);
			newScale = (clusterData.scale + scaleChange).toFixed(2);
		} else {
			if (settings.thresholdScaling){
				let curScale = item.scaleX;
				if (curScale > settings.scaleThresholdMax){
					newScale = generateRandom(settings.minScale,settings.scaleThresholdMin);
				} else {
					newScale = generateRandom(settings.scaleThresholdMax,settings.maxScale);
				}
			} else {
				newScale = generateRandom(settings.minScale,settings.maxScale);
			}
			
		}
	} else {
		newScale = motionSequence[sequence-1][itemIndex].scale;

		if (settings.animateBlur){

			const blur1 = item.getChildByName('blur1');
			const blur2 = item.getChildByName('blur2');
			let newAlpha;

			if (settings.mapAlpha){
				newAlpha = mapRange(newScale,.4,2.6, 0,1)
			} else {
				if (newScale > settings.animBlurThreshold){
					newAlpha = 1;
				} else {
					newAlpha = 0;
				}
			}

			tl.to(blur1, settings.colorAnimTime, {
				alpha:  newAlpha,
			},animGroup);
			tl.to(blur2, settings.colorAnimTime, {
				alpha: newAlpha,
			},animGroup);

		}

	}

	let newPositionX, newPositionY, onCompleteFunction;

	if (settings.randomPositioning){
		const positionChangeX = generateRandom(0,settings.maxPositionChange,true,true);
		const positionChangeY = generateRandom(0,settings.maxPositionChange,true,true);
		newPositionX = clusterData.x + positionChangeX;
		newPositionY = clusterData.y + positionChangeY;
		onCompleteFunction = isLast ? repeatScaleAndMove : null;
	} else {
		newPositionX = motionSequence[sequence-1][itemIndex].x;
		newPositionY= motionSequence[sequence-1][itemIndex].y;
		onCompleteFunction = isLast ? repeatScaleAndMove : null;
	}

	tl.to(item, settings.colorAnimTime, {
		scaleX:newScale, 
		scaleY:newScale, 
		x: newPositionX, 
		y: newPositionY,
		ease: Sine.easeInOut,
		onComplete: onCompleteFunction
	},animGroup);
	
}

function repeatScaleAndMove(){

	const { clusters, settings } = data;

	step+=1;

	if (sequence === numSequences){
		sequence = 1;
	} else {
		sequence+=1;
	}

	clusters.forEach((clusterData,i)=>{
		const clusterObject = clustersArray[i];
		const isLast = i === numClusters-1;
		scaleAndMove(clusterObject,clusterData,isLast,i);
	}) 
}

function generateRandom(min = 0,max = 1,withDirection = false,isInt = false){
	const direction = withDirection ? Math.round(Math.random()) * 2 - 1 : 1;
	const numberFloat = (Math.random() * (max - min) + min)*direction;
	if (isInt){
		return Math.round(numberFloat);
	} else {
		return numberFloat;
	}
}

init(); //
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console