Andersama/consoletest.js

## consoletest.js
/*Copy/Paste this into console to manually trigger events (to test animation in broswer)*/
/*See: https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript */
var event;
var evtName = "obsStreamingStarted";
if (document.createEvent) {
  event = document.createEvent("HTMLEvents");
  event.initEvent(evtName, true, true);
} else {
  event = document.createEventObject();
  event.eventType = evtName;
}

event.eventName = evtName;

if (document.createEvent) {
  window.dispatchEvent(event);
} else {
  window.fireEvent("on" + event.eventType, event);
}

## obsvelocityanimation.html
<html>
<head>

<style>

		* {
			padding: 0;
			margin: 0;
			pointer-events: none;
		}

		body {
			background: rgba(0,0,0,0);
			overflow: hidden;

			font-family: "Helvetica Neue", "Open Sans";
			font-weight: 100;
		}

		a {
			color: #4bc2f1;
			text-decoration: none;
		}

		a:hover {
			text-decoration: underline;
		}

		#container {
			perspective: 50px;
			-webkit-perspective: 50px;
			-moz-perspective: 50px;
			-ms-perspective: 50px;

			transform-origin: 50% 100%;
			-webkit-transform-origin: 50% 100%;
			-moz-transform-origin: 50% 100%;
			-ms-transform-origin: 50% 100%;

			opacity: 0.55;
		}

		#welcome {
			position: fixed;
			width: 22rem;
			left: 50%;
			top: 45%;
			margin-top: -1rem;
			margin-left: -11rem;

			font-weight: 200;
			color: #fff;
			opacity: 0.65;
			text-align: center;
			font-size: 0.775rem;
			line-height: 1.05rem;
			letter-spacing: 0.135em;
			word-spacing: -0.075rem;
		}

		@media screen and (max-width: 400px) {
			#welcome {
				font-size: 0.45rem !important;
			}
		}

		#browserWidthNotice {
			font-style: italic;
			display: none;
		}

		#logo {
			position: fixed;
			right: 0.75rem;
			bottom: 0.65rem;

			cursor: pointer;

			text-decoration: none;
			color: #d6d6d6;
			font-size: 2rem;
			letter-spacing: 0.025em;
		}

		#logoDot {
			color: #d74580;
		}

		.dot {
			position: fixed;
			width: 30px;
			height: 30px;

			border-radius: 30px;
			background-color: #6441A4;/*#4bc2f1;*/
		}

</style>

</head>
<body>

<div class="animation-holder">

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.0/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.0/velocity.ui.min.js"></script>
<script>
	function debounce(func, wait, immediate) {
		var timeout;
		return function() {
			var context = this, args = arguments;
			var later = function() {
				timeout = null;
				if (!immediate) func.apply(context, args);
			};
			var callNow = immediate && !timeout;
			clearTimeout(timeout);
			timeout = setTimeout(later, wait);
			if (callNow) func.apply(context, args);
		};
	};
	function r (min,max){
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	var screenWidth = window.screen.availWidth,
		screenHeight = window.screen.availHeight,
		chromeHeight = screenHeight - document.documentElement.clientHeight;

	var translateZMin = -725,
		translateZMax = 600;

	var animationHolder = document.getElementsByClassName("animation-holder")[0];

	Velocity(animationHolder,{
		opacity: 0
	},{
		duration: 1
	});

	var number = 200;
	for(var i = 0; i < number; i++){
		var dot = document.createElement("div");
		dot.classList.add("dot");
		animationHolder.appendChild(dot);
	}
	var dots = document.getElementsByClassName("dot");

	animationHolder.setAttribute("style","perspective-origin: "+screenWidth/2+"px "+((screenHeight*0.45) - chromeHeight) + "px; perspective: 50px");

	//anim();
	var animFinished = true;
	var anim = function(){
		if(animFinished == true){
			animFinished = false;
			velAnimation();
		} else {

		}
	};

	function velAnimation(){
			Velocity(document.body,{
				backgroundColor: "#000000",
				backgroundColorAlpha: 1
			},{
				duration: 800
			});

			Velocity(animationHolder,{
				perspective:[215,50],
				rotateZ: [5,0],
				opacity: [0.85,0.55]
			},{
				duration: 800,
				delay: 1625,
				loop: 1,
			});

			Velocity(dots,{
				translateX: [
					function () {return "+=" + r(-screenWidth/2.5,screenWidth/2.5)},
					function () {return r(0,screenWidth)}
				],
				translateY: [
					function () {return "+=" + r(-screenHeight/2.75,screenHeight/2.75)},
					function () {return r(0,screenHeight)}
				],
				translateZ: [
					function () {return "+=" + r(translateZMin,translateZMax)},
					function () {return r(translateZMin,translateZMax)}
				],
				opacity: [
					function () {return Math.random()},
					function () {return Math.random()*0.9 + 0.1}
				]
			},{
				duration: 5000,
			});

			Velocity(animationHolder,{
				opacity: 0
			},{
				duration: 800
			});

			Velocity(document.body,{
				backgroundColor: "#000000",
				backgroundColorAlpha: 0
			},{
				duration: 800,
				delay: 3400
			}).then(function(elements){ animFinished = true; });
	}

	var scenename = "";
	window.addEventListener('obsSceneChanged', function(evt) {
		console.log(evt);
		if(evt.detail.name == "VideoGames1080p" || evt.detail.name.indexOf("BrandImage") >= 0 ){
			if(scenename != evt.detail.name){
				anim();
			}
		}
		scenename = evt.detail.name;
	});
	window.addEventListener('obsStreamingStarting', function(evt) {

	});
	window.addEventListener('obsStreamingStarted', function(evt) {
		anim();
	});
	window.addEventListener('obsStreamingStopping', function(evt) {

	});
	window.addEventListener('obsStreamingStopped', function(evt) {
		anim();
	});
	/*
	window.obsstudio.onVisibilityChange = function(visiblity) {
		var t = document.createTextNode(visibility);
		document.getElementsByClass("animation-holder")[0].appendChild(t);
	};
	window.obsstudio.onSceneChange = function(scenename) {
		var t = document.createTextNode(scenename);
		document.getElementsByClass("animation-holder")[0].appendChild(t);
	}
	*/
</script>
</body>

</html>
	/Copy/Paste this into console to manually trigger events (to test animation in broswer)/
	/See: https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript /
	var event;
	var evtName = "obsStreamingStarted";
	if (document.createEvent) {
	event = document.createEvent("HTMLEvents");
	event.initEvent(evtName, true, true);
	} else {
	event = document.createEventObject();
	event.eventType = evtName;
	}

	event.eventName = evtName;

	if (document.createEvent) {
	window.dispatchEvent(event);
	} else {
	window.fireEvent("on" + event.eventType, event);
	}
	<html>
	<head>

	<style>

	* {
	padding: 0;
	margin: 0;
	pointer-events: none;
	}

	body {
	background: rgba(0,0,0,0);
	overflow: hidden;

	font-family: "Helvetica Neue", "Open Sans";
	font-weight: 100;
	}

	a {
	color: #4bc2f1;
	text-decoration: none;
	}

	a:hover {
	text-decoration: underline;
	}

	#container {
	perspective: 50px;
	-webkit-perspective: 50px;
	-moz-perspective: 50px;
	-ms-perspective: 50px;

	transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;

	opacity: 0.55;
	}

	#welcome {
	position: fixed;
	width: 22rem;
	left: 50%;
	top: 45%;
	margin-top: -1rem;
	margin-left: -11rem;

	font-weight: 200;
	color: #fff;
	opacity: 0.65;
	text-align: center;
	font-size: 0.775rem;
	line-height: 1.05rem;
	letter-spacing: 0.135em;
	word-spacing: -0.075rem;
	}

	@media screen and (max-width: 400px) {
	#welcome {
	font-size: 0.45rem !important;
	}
	}

	#browserWidthNotice {
	font-style: italic;
	display: none;
	}

	#logo {
	position: fixed;
	right: 0.75rem;
	bottom: 0.65rem;

	cursor: pointer;

	text-decoration: none;
	color: #d6d6d6;
	font-size: 2rem;
	letter-spacing: 0.025em;
	}

	#logoDot {
	color: #d74580;
	}

	.dot {
	position: fixed;
	width: 30px;
	height: 30px;

	border-radius: 30px;
	background-color: #6441A4;/#4bc2f1;/
	}

	</style>

	</head>
	<body>

	<div class="animation-holder">

	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.0/velocity.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.0/velocity.ui.min.js"></script>
	<script>
	function debounce(func, wait, immediate) {
	var timeout;
	return function() {
	var context = this, args = arguments;
	var later = function() {
	timeout = null;
	if (!immediate) func.apply(context, args);
	};
	var callNow = immediate && !timeout;
	clearTimeout(timeout);
	timeout = setTimeout(later, wait);
	if (callNow) func.apply(context, args);
	};
	};
	function r (min,max){
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	var screenWidth = window.screen.availWidth,
	screenHeight = window.screen.availHeight,
	chromeHeight = screenHeight - document.documentElement.clientHeight;

	var translateZMin = -725,
	translateZMax = 600;

	var animationHolder = document.getElementsByClassName("animation-holder")[0];

	Velocity(animationHolder,{
	opacity: 0
	},{
	duration: 1
	});

	var number = 200;
	for(var i = 0; i < number; i++){
	var dot = document.createElement("div");
	dot.classList.add("dot");
	animationHolder.appendChild(dot);
	}
	var dots = document.getElementsByClassName("dot");

	animationHolder.setAttribute("style","perspective-origin: "+screenWidth/2+"px "+((screenHeight*0.45) - chromeHeight) + "px; perspective: 50px");

	//anim();
	var animFinished = true;
	var anim = function(){
	if(animFinished == true){
	animFinished = false;
	velAnimation();
	} else {

	}
	};

	function velAnimation(){
	Velocity(document.body,{
	backgroundColor: "#000000",
	backgroundColorAlpha: 1
	},{
	duration: 800
	});

	Velocity(animationHolder,{
	perspective:[215,50],
	rotateZ: [5,0],
	opacity: [0.85,0.55]
	},{
	duration: 800,
	delay: 1625,
	loop: 1,
	});

	Velocity(dots,{
	translateX: [
	function () {return "+=" + r(-screenWidth/2.5,screenWidth/2.5)},
	function () {return r(0,screenWidth)}
	],
	translateY: [
	function () {return "+=" + r(-screenHeight/2.75,screenHeight/2.75)},
	function () {return r(0,screenHeight)}
	],
	translateZ: [
	function () {return "+=" + r(translateZMin,translateZMax)},
	function () {return r(translateZMin,translateZMax)}
	],
	opacity: [
	function () {return Math.random()},
	function () {return Math.random()*0.9 + 0.1}
	]
	},{
	duration: 5000,
	});

	Velocity(animationHolder,{
	opacity: 0
	},{
	duration: 800
	});

	Velocity(document.body,{
	backgroundColor: "#000000",
	backgroundColorAlpha: 0
	},{
	duration: 800,
	delay: 3400
	}).then(function(elements){ animFinished = true; });
	}

	var scenename = "";
	window.addEventListener('obsSceneChanged', function(evt) {
	console.log(evt);
	if(evt.detail.name == "VideoGames1080p" \|\| evt.detail.name.indexOf("BrandImage") >= 0 ){
	if(scenename != evt.detail.name){
	anim();
	}
	}
	scenename = evt.detail.name;
	});
	window.addEventListener('obsStreamingStarting', function(evt) {

	});
	window.addEventListener('obsStreamingStarted', function(evt) {
	anim();
	});
	window.addEventListener('obsStreamingStopping', function(evt) {

	});
	window.addEventListener('obsStreamingStopped', function(evt) {
	anim();
	});
	/*
	window.obsstudio.onVisibilityChange = function(visiblity) {
	var t = document.createTextNode(visibility);
	document.getElementsByClass("animation-holder")[0].appendChild(t);
	};
	window.obsstudio.onSceneChange = function(scenename) {
	var t = document.createTextNode(scenename);
	document.getElementsByClass("animation-holder")[0].appendChild(t);
	}
	*/
	</script>
	</body>

	</html>