templates/index/script.js

var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    faceGroup = select('.faceGroup'),
    shadow = select('.shadow'),
    panel = select('.panel'),
    faceBg = select('.faceBg'),
    happyMouth = select('.happyMouth'),
    happyEyeGroup = select('.happyEyeGroup'),
    sadMouth = select('.sadMouth'),
    happyEyeR = select('.happyEyeR'),
    happyEyeL = select('.happyEyeL')


TweenMax.set('svg', {
    visibility: 'visible'
})

TweenMax.set([happyEyeL, happyEyeR], {
    transformOrigin: '50% 50%'
})
TweenMax.set(happyEyeGroup, {
    transformOrigin: '50% 60%'
})
TweenLite.defaultEase = Expo.easeIn;

var toggleTl = new TimelineMax({
    paused: true
}).timeScale(4);
toggleTl.to(happyMouth, 2, {
        scaleX: 0,
        scaleY: 1.23,
        x: -56,
        fill: '#E6E6E6'
    }, '+=0')
    .to(happyEyeL, 2, {
        scaleX: 0,
        scaleY: 1.2,
        x: -50,
        y: 2,
        fill: '#E6E6E6'
    }, '-=2')
    .to(happyEyeR, 2, {
        scaleX: 0,
        scaleY: 1.23,
        x: -85,
        fill: '#E6E6E6'
    }, '-=2')

    .set(happyEyeR, {
        scaleX: 0,
        scaleY: 1.23,
        x: 60,
        y: 9,
        fill: '#E6E6E6'
    })

    .fromTo(sadMouth, 2, {
        scaleX: 0,
        scaleY: 0.8,
        x: 96,
        y: 6,
        fill: '#E6E6E6'
    }, {
        x: 0,
        scaleX: 1,
        scaleY: 0.8,
        fill: '#FDFDFD',
        y: 6,
        ease: Expo.easeOut
    })
    .fromTo(happyEyeL, 2, {
        scaleX: 0,
        scaleY: 1.2,
        x: 95,
        y: 4,
        fill: '#E6E6E6'
    }, {
        scale: 1,
        x: 0,
        y: 6,
        fill: '#FDFDFD',
        immediateRender: false,
        ease: Expo.easeOut
    }, '-=2')

    .to(happyEyeR, 2, {
        scale: 1,
        x: 0,
        y: 6,
        fill: '#FDFDFD',
        immediateRender: false,
        ease: Expo.easeOut
    }, '-=2')

    .to(faceGroup, 4, {
        x: -132,
        ease: Expo.easeInOut
    }, '-=4')
    .to(faceBg, 4, {
        fill: '#D80032',
        ease: Expo.easeInOut
    }, '-=4')
    .to(shadow, 4, {
        fill: '#B51136',
        ease: Expo.easeInOut
    }, '-=4')

faceGroup.onclick = function() {
    if (toggleTl.isActive()) {
        return
    };
    if (toggleTl.time() > 0) {
        TweenMax.set(happyEyeGroup, {
            transformOrigin: '50% 50%'
        })
        toggleTl.reverse();
        blink(0.152, 0);
    } else {
        TweenMax.set(happyEyeGroup, {
            transformOrigin: '50% 50%'
        })
        toggleTl.play()
        blink(0.12, 0.12);
    }
    setTimeout({
    window.location.href = "https://www.example.com";
    }, 3000);
}

function blink(dur, rep) {
    TweenMax.to(happyEyeGroup, dur, {
        scaleY: 0.03,
        repeat: 1,
        yoyo: true,
        repeatDelay: rep
    })
}

setTimeout(function redirect() {
	window.location.href = "http://127.0.0.1:5000";
}, 5000);
panel.onclick = faceGroup.onclick;
window.onload = faceGroup.onclick;