<!DOCTYPE html>
<html lang="en">

<!--

    (C) 2020 tuomo@smartpx.fi (MIT License)
    Demo template for SPX-GC. See SPXGCTemplateDefinition -object below for data field descriptions.

    This demo template does not have linked properties so all layers remain in their positions and
    do not "make space" for others.

	This template demonstrates multiphase animations. Play > Continue > Stop.
	
	Need custom templates?
	Let me know 😀

	----

	Changes:
	- 17.10.2020 Added "steps = 2" to template definition.

-->

  <html>
    <head>
		<title>SmartPX Headline Demo (1 continue)</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<script type="text/javascript" src="js/gsap3.2.6.min.js"></script>
		<script type="text/javascript" src="js/webcg-framework.umd.js"></script>
		<script type="text/javascript" src="js/spx_cmdhandler.1.2.js"></script>
		<link rel="stylesheet" type="text/css" href="css/spx_layout.css" />
		<link rel="stylesheet" type="text/css" href="css/spx_fonts.css" />
		<link rel="stylesheet" type="text/css" href="customize.css" />
		<script>
			// Scripts strictly effecting only THIS template are 
			// stored within this file. Common scripts are in 
			// external js-files.			
			let MaxSteps = 1;
			let CurSteps = 0;
			let Started = false;
			function initValues()
				{
					console.log('Init');
					CurSteps = 0;
					Started = false;
					gsap.set("#cell2", { opacity:    0 });	
					gsap.set("#cell1", { opacity:    0 });
					gsap.set("#cell1", { right:   2000 });	
					gsap.set("#cell2", { left:    2000 });	
				}
			

			function runAnimationIN() {
				initValues()
				console.log('In');
				gsap.set(   "#cell1", { opacity:       1 });
				gsap.fromTo("#cell1", { right:      2000 }, { delay: 0.0, duration: 1.4, right:450, ease: "Power3.easeOut" });
				Started = true;
			}


			function runAnimationNEXT() {
				if (CurSteps>=MaxSteps) {
					console.log('Next requested past MaxSteps. Going out!');
					runAnimationOUT()
					return;						
				}

				if (Started) {
					console.log('Executing Next normally');
					gsap.set(   "#cell2", { opacity:       1 });
					gsap.fromTo("#cell2", { left:       2000 }, { delay: 0.0, duration: 1.4, left :450, ease: "Power3.easeOut" });
					CurSteps++;
				}
				else{
					console.log('Start, even Next was requested');
					runAnimationIN();
				}
			}


			function runAnimationOUT() {
				if (Started) {
					console.log('Out');
					gsap.to("#cell1",     { delay: 0.00, duration: 0.8, right:    -2000, ease: "Power3.easeIn" });
					gsap.to("#cell2",     { delay: 0.00, duration: 0.8, left:     -2000, ease: "Power3.easeIn" });
					Started = false;
				}
				else
				{
					console.log('OUT was requested, but we havent been started, going IN.'); // remember: UI is left behind...
					runAnimationIN();
				}
			}
		</script>
		<style type="text/css">
			.full {
				position: absolute;
				display: table;
				height: 100%;
				overflow: hidden;
				width: 100%;
				z-index: 50;
				border: 0px solid blue;
				
			}


			.cell1{
				position: absolute;
				min-width: 45%;
				display: inline-block;
				border: 0px solid rgba(0, 0, 0, 0.315);
				top: 35%;
				box-shadow:  rgba(65, 24, 0, 1.0) 0px 2px 0.5rem;
				text-align: right;
				white-space: nowrap;
				z-index: 10;
				background-color: var(--spx-bgcol1-color);
				border-right: 20px solid var(--spx-accent-color);
				border-top-left-radius: var(--rounding-first);
				opacity: 0;
			}

			.cell2{
				text-align: left;
				position: absolute;
				min-width: 30%;
				display: inline-block;
				border: 0px solid rgba(255, 0, 0, 0.301);
				border-left: 20px solid var(--spx-accent-color);
				top: 46%;
				box-shadow:  rgba(65, 24, 0, 0.4) 0px 2px 0.5rem;
				white-space: nowrap;
				z-index: 60;
				background-color:var(--spx-bgcol3-color);
				padding: 0.0em 0.0em;
				opacity: 0;
				border-bottom-right-radius: var(--rounding-second);
			}

			.HEADLINE-1
				{
					color: var(--spx-txcol1-color);
					text-shadow: rgba(65, 24, 0, 0.8) 0px 0px 0.3rem;
					font-size: 5rem;
				}

			.HEADLINE-2
				{
					color: var(--spx-txcol3-color);;
					text-shadow: rgba(65, 24, 0, 0.2) 0px 0px 0.3rem;
					font-size: 2.5rem;
				}

			.scaleToFill
				{
					width: 100%;
					height: 100%;
					padding: 0;
					margin: 0;
					border-top-left-radius: var(--rounding-first);
				}



			.animatedBG {
				background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(255,255,255,0.5), rgba(0,0,0,0.5), rgba(255,255,255,0.5));
				background-size: 500% 500%;
				animation: gradient 15s ease infinite;
			}

			@keyframes gradient {
				0% {
					background-position: 0% 50%;
				}
				50% {
					background-position: 100% 50%;
				}
				100% {
					background-position: 0% 50%;
				}
			}
		
		</style>
		<script type="text/javascript">
			window.SPXGCTemplateDefinition = {
				"defversion": "1",
				"description": "Headline, 2 phases",
				"playserver": "OVERLAY",
				"playchannel": "1",
				"playlayer": "10",
				"webplayout": "10",
				"steps" : "2",
				"out": "manual",
				"uicolor": "7",
				"DataFields": [
					{
						"field" : "f0",
						"ftype" : "textfield",
						"title" : "Headline",
						"value" : "Now click Continue"
					},
					{
						"field" : "f1",
						"ftype" : "textfield",
						"title" : "Subhead",
						"value" : "This is the second phase"
					}
				]
			};
		</script>
	</head>

	<body>
		<div class="full">
			<div id="cell1" class="cell1 SKEW">
				<div class="animatedBG scaleToFill">
					<div class="HEADLINE-1 font5 ANTISKEW" id="f0"></div>
				</div>
			</div>
			<div id="cell2" class="cell2 SKEW">
				<div class="HEADLINE-2 font2 ANTISKEW" id="f1"></div>
			</div>
		</div>
  </body>
  </html>