<!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.

   	Need custom templates?
	Let me know 😀

-->


<head>
    <meta charset="utf-8" />
    <title>RIGHT</title>
    <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>

        let norm = 0;
        let movd = '3.2rem'; // if changed see also script at bottom of this page

        function initValues(){
            // set initial values to elements
        }



        function runAnimationIN(IsLoop) {
            let dur = 0.8;
            initValues()
            gsap.set("#TG", { opacity: 1 });
            gsap.set("#line1", { opacity: 1 });
            gsap.fromTo(
                "#line1",
                dur,
                    {
                        // start value
                        width:0
                    },
                    {
                        // end value
                        width:function(i, target)
                            {
                            target.style.width = "auto"; 
                            var width = target.offsetWidth-3;
                            target.style.width = "0px"; //now reset it to 0
                            return width; //return the natural height
                            },
                        ease: "back.out(2.0)"
                    }
                );
            
            gsap.fromTo("#f0", { opacity:  0 }, { delay: 0.1, duration: dur - 0.2, opacity  : 1,       ease: "Power3.easeOut" });
            gsap.fromTo("#f0", { x:      200 }, { delay: 0.1, duration: dur - 0.1, x     : 0,          ease: "back.out(2.0)" });
            
            if (IsLoop){
                console.log('%c SPX LOOP MODE! Parameter loop=true. Animation will forcefully AUTO-LOOP. ', 'background: #222; color: #bada55');
                setTimeout(function(){ runAnimationOUT(); }, 3000);
                setTimeout(function(){ runAnimationIN(true); }, 5000);
            }
        }

        function runAnimationOUT() {
            let dur = 0.7;
            gsap.to("#f1",     { delay: 0.10, duration: dur/2, y:     -100, ease: "back.in(1.2)" });
            gsap.to("#line1",  { delay: 0.00, duration: dur, width:    0, ease: "back.in(1.2)" });
            gsap.to("#f0",     { delay: 0.00, duration: dur, x:      200, ease: "back.in(1.2)" });
            gsap.set("#line1", { delay: dur + 0.0, opacity: 0 });
            gsap.set("#TG",    { delay: dur - 0.0, opacity: 0 });
        }

    </script>


    <style>
        .tgpos{
        transform-origin: top right;
        position: absolute;
        border-right: 1.4rem solid var(--spx-accent-color);
        display:inline-block;
        right: 3.2vw;
        top: 9%;
        z-index: 10;
        opacity:0;
        }
    </style>

    <script type="text/javascript">
        window.SPXGCTemplateDefinition = {
            "description": "Top right",
            "playserver": "OVERLAY",
            "playchannel": "1",
            "playlayer": "8",
            "webplayout": "8",
            "out": "manual",
            "uicolor": "7",
            "DataFields": [
                {
                    "ftype" : "instruction",
                    "value" : "Fields also supports emoji."
                },
                {
                    "field" : "f0",
                    "ftype" : "textfield",
                    "title" : "Infotext top right",
                    "value" : "👍 #hashtag"
                }
            ]
        };
    </script>

</head>

<body>
    <div class="SPXWindow SPX_AUTOSIZE" data-spx-remember="Use either SPX_AUTOSIZE or SPX_FIXSIZE">
        <div id="TG" class="tgpos SKEW RIGHTELEMENTS">
            <div id="line1" class="color1 accentLeft region fright">
                <div class="font7 nowrap fright ANTISKEW" id="f0"></div>
            </div>
        </div>
    </div>
</body>
</html>
