Wiethoofd/track-matte-debug.html Secret

## track-matte-debug.html
<!doctype html>
<html>
<meta charset=utf-8>
<title>Track Matte Debug</title>
<style>
html {
 box-sizing: border-box;
 margin: 0;
}
*, *:before, *:after {
 box-sizing: inherit;
}
body {
 font-family: sans-serif;
 font-size: 20px;
 line-height: 1.25;
 margin: 0;
}
/*
 Shared styles between stinger and track matte layer
*/
.stinger,
.track-matte {
 position: absolute;
 left: 0;
 width: 1920px;
 height: 1080px;
 overflow: hidden;
}

/*
 Top layer for stinger elements
  - visible to stream
 */
.stinger {
 top: 0;
}
/*
 Track Matte layer
  - using black to 'hide'
  - white 'reveals' next scene
 */
.track-matte {
 top: 1080px;
 background-color: black;
}
/*
 Track Matte Magic
  - Duplicated contents in .mover are changed to white with CSS
 */
.track-matte .mover {
 filter: grayscale(1) brightness(999) invert(1);
}

/*
 Transition elements
  - Orange box inside .mover that goes across the screen
  - Default position is off screen to the right
  - Requires z-index of element(s) to be above the .matte layer
 */
.mover {
 position: absolute;
 width: 80px;
 height: 1080px;
 transform: translateX(1920px);
}
.element {
 position: absolute;
 left: 0;
 top: 0;
 width: 80px;
 height: 1080px;
 background-color: orange;
 z-index: 1;
}
.matte {
 position: absolute;
 background-color: black; /* Color gets inverted by parent */
 height: 1080px;
 width: 3840px;
 z-index: 0;
}
/*
 Transition starts by adding .transition to body/parent
  - Makes .mover go from right to left across the screen
 */
.transition .mover {
 transform: translateX(-1920px);
 transition: transform 2s ease-in-out;
}
</style>
<body class="">

<div class="stinger">
 <div class="mover">
  <div class="element"></div>
 </div>
</div>
<div class="track-matte"><!-- Duplicate the contents of .stinger .mover and add a .matte layer -->
 <div class="mover">
  <div class="element"></div>
  <div class="matte"></div>
 </div>
</div>

<script>
// Helper function for manual testing and console output
function stinger(run = true) {
    document.querySelector('body').classList.toggle('transition', run);
    console.log('stinger run',run);
}

// Use either obsSourceActiveChanged or the transitionStart/-Stop functions
//  Trigger the transition and do clean up (reset class)
window.addEventListener('obsSourceActiveChanged', function(event) {
    // Toggles .transition class on body during scene change
    //stinger(event.detail.active);
});
window.addEventListener('transitionStart', function(event) {
    console.log('transitionStart');
    stinger(true);
});
window.addEventListener('transitionStop', function(event) {
    console.log('transitionStop');
    stinger(false);
});
</script>
</body>
</html>
	<!doctype html>
	<html>
	<meta charset=utf-8>
	<title>Track Matte Debug</title>
	<style>
	html {
	box-sizing: border-box;
	margin: 0;
	}
	, :before, *:after {
	box-sizing: inherit;
	}
	body {
	font-family: sans-serif;
	font-size: 20px;
	line-height: 1.25;
	margin: 0;
	}
	/*
	Shared styles between stinger and track matte layer
	*/
	.stinger,
	.track-matte {
	position: absolute;
	left: 0;
	width: 1920px;
	height: 1080px;
	overflow: hidden;
	}

	/*
	Top layer for stinger elements
	- visible to stream
	*/
	.stinger {
	top: 0;
	}
	/*
	Track Matte layer
	- using black to 'hide'
	- white 'reveals' next scene
	*/
	.track-matte {
	top: 1080px;
	background-color: black;
	}
	/*
	Track Matte Magic
	- Duplicated contents in .mover are changed to white with CSS
	*/
	.track-matte .mover {
	filter: grayscale(1) brightness(999) invert(1);
	}

	/*
	Transition elements
	- Orange box inside .mover that goes across the screen
	- Default position is off screen to the right
	- Requires z-index of element(s) to be above the .matte layer
	*/
	.mover {
	position: absolute;
	width: 80px;
	height: 1080px;
	transform: translateX(1920px);
	}
	.element {
	position: absolute;
	left: 0;
	top: 0;
	width: 80px;
	height: 1080px;
	background-color: orange;
	z-index: 1;
	}
	.matte {
	position: absolute;
	background-color: black; /* Color gets inverted by parent */
	height: 1080px;
	width: 3840px;
	z-index: 0;
	}
	/*
	Transition starts by adding .transition to body/parent
	- Makes .mover go from right to left across the screen
	*/
	.transition .mover {
	transform: translateX(-1920px);
	transition: transform 2s ease-in-out;
	}
	</style>
	<body class="">

	<div class="stinger">
	<div class="mover">
	<div class="element"></div>
	</div>
	</div>
	<div class="track-matte"><!-- Duplicate the contents of .stinger .mover and add a .matte layer -->
	<div class="mover">
	<div class="element"></div>
	<div class="matte"></div>
	</div>
	</div>

	<script>
	// Helper function for manual testing and console output
	function stinger(run = true) {
	document.querySelector('body').classList.toggle('transition', run);
	console.log('stinger run',run);
	}

	// Use either obsSourceActiveChanged or the transitionStart/-Stop functions
	// Trigger the transition and do clean up (reset class)
	window.addEventListener('obsSourceActiveChanged', function(event) {
	// Toggles .transition class on body during scene change
	//stinger(event.detail.active);
	});
	window.addEventListener('transitionStart', function(event) {
	console.log('transitionStart');
	stinger(true);
	});
	window.addEventListener('transitionStop', function(event) {
	console.log('transitionStop');
	stinger(false);
	});
	</script>
	</body>
	</html>