File size: 3,160 Bytes
41b4437
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
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;