c-pzzo/ChristmasCard

1setTimeout(() => {
2    setTimeout(() => {
3      const card = document.getElementById("flip-card-inner");
4      card.style.transform = "rotateY(180deg)";
5    }, 1500);
6  }, 1000);
7  
8  setTimeout(() => {
9    setTimeout(openEnvelope, 1000);
10  }, 2000);
11  
12  function openEnvelope() {
13    setInterval(() => {
14      document.getElementById("one").style.transform = "rotate(180deg)";
15      document.getElementById("companyName").style.display = "none";
16    }, 2000);
17  
18    setTimeout(letterUp, 2000);
19  }
20  
21  function letterUp() {
22    const letter = document.getElementById("letter");
23    const one = document.getElementById("one");
24    // const envelope = document.getElementById("envelope");
25  
26    one.style.zIndex = 1;
27    //envelop
28    letter.style.zIndex = 2;
29    let i = 0;
30    let id = null;
31    clearInterval(id);
32  
33    id = setInterval(() => {
34      if (i == 500) {
35        clearInterval(id);
36      } else {
37        letter.style.top = -i + "px";
38        i++;
39      }
40    }, 5);
41  
42    setTimeout(letterDown, 3000);
43  }
44  
45  function letterDown() {
46    const letter = document.getElementById("letter");
47    const card = document.getElementById("flip-card");
48  
49    letter.style.top = -500 + "px";
50    letter.style.zIndex = 4;
51  
52    let i = 0;
53    let id = null;
54    clearInterval(id);
55  
56    id = setInterval(() => {
57      if (i == 100) {
58        // lastPos = -i;
59        clearInterval(id);
60      } else {
61        letter.style.top = -400 + i * 5 + "px";
62        letter.style.transform = "rotate(" + -i / 18 + "deg)";
63  
64        card.style.transform = "rotate(" + i / 18 + "deg)";
65  
66        i++;
67      }
68    }, 10);
69  
70    setTimeout(() => {
71      const popUp = document.getElementById("popUp");
72      popUp.style.display = "block";
73      popUp.style.zIndex = 5;
74    }, 2000);
75  }