her-birthday/index.js at main · ziadalzarka/her-birthday · GitHub

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
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

async function execute() {
  // Happy birthday, sweetie!
  gsap.to("#intro", { opacity: 1, duration: 1 });

  await sleep(4000);

  // Fade out
  gsap.to("#intro", { opacity: 0, duration: 1 });

  await sleep(1500);

  // Fade page 2 in
  document.getElementById("page-1").classList.add("d-none");
  document.getElementById("page-2").classList.remove("d-none");

  gsap.to("#page-2", { opacity: 1, duration: 1.5, ease: "power1.in" });

  await sleep(5000);

  // Fade first slide out
  gsap.to("#page-2-slide-1", { opacity: 0, duration: 1.5 });

  await sleep(2000);

  // Fade second slide in
  gsap.to("#page-2-slide-2", { opacity: 1, duration: 1.5, ease: "power1.in" });
  gsap.to(".earth", { opacity: 1, scale: 1, duration: 20 });
  TweenMax.to(".earth", 10, {
    rotation: "+=360",
    repeat: -1,
    ease: Linear.easeNone,
    transformOrigin: "50% 50%",
  });

  await sleep(6000);

  // Fade second slide out
  gsap.to("#page-2-slide-2", { opacity: 0, duration: 1.5 });

  await sleep(2000);

  // Fade third slide in
  gsap.to("#page-2-slide-3", { opacity: 1, duration: 1.5, ease: "power1.in" });

  await sleep(6000);

  // Fade third slide out
  gsap.to("#page-2-slide-3", { opacity: 0, duration: 1.5 });

  await sleep(2000);

  // Fade fourth slide in
  gsap.to("#page-2-slide-4", { opacity: 1, duration: 1.5, ease: "power1.in" });

  await sleep(6000);

  gsap.to("#page-2", { opacity: 0, duration: 2 });

  await sleep(2500);

  // Fade page 3 in
  document.getElementById("page-2").classList.add("d-none");
  document.getElementById("page-3").classList.remove("d-none");

  gsap.to("#page-3", { opacity: 1, duration: 1.5, ease: "power1.in" });

  await sleep(5000);

  gsap.to("#text", { opacity: 0, duration: 1 });

  await sleep(2000);

  document.getElementById("text").innerText = "I love you";
  gsap.to("#text", { opacity: 1, duration: 1.5, ease: "power1.in" });

  await sleep(5000);

  gsap.to("#text", { opacity: 0, duration: 1 });

  await sleep(2000);

  document.getElementById("text").innerText = "Happy birthday :)";
  gsap.to("#text", { opacity: 1, duration: 1.5, ease: "power1.in" });
}

execute();

const callback = () => {
  const audio = document.querySelector("audio");
  audio.volume = 0.2;
  audio.play();
};

window.addEventListener("click", callback);
window.addEventListener("touchstart", callback);