page-web/main.js at main · T-peres/page-web · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import "./style.scss";
import gsap from "gsap";

const items = document.querySelectorAll(".item");

items.forEach((item, index) => {
  item.addEventListener("click", () => {
    gsap.to(".right", {
      duration: 2,
      y: `-${index * 100}%`,
      ease: "elastic.out(1,0.75)",
    });
    gsap.to(".left", {
      duration: 2,
      x: `${index * 345}px`,
      ease: "elastic.out(1,0.75)",
    });
    if (index === 1) {
      gsap.to(".item-2", {
        duration: 2,
        scale: 1,
        ease: "elastic.out(1,0.85)",
      });
      gsap.to(".item-2", {
        duration: 0,
        filter: "blur(0)",
      });
      gsap.to(".item-1", {
        duration: 2,
        x: 100,
      });
    }
    if (index === 2) {
      gsap.to(".item-3", {
        duration: 2,
        scale: 1,
        ease: "elastic.out(1,0.85)",
      });
      gsap.to(".item-3", {
        duration: 0,
        filter: "blur(0)",
      });
      gsap.to(".item-2", {
        duration: 2,
        x: 100,
      });
    }
    if (index === 3) {
      gsap.to(".item-4", {
        duration: 2,
        scale: 1,
        ease: "elastic.out(1,0.85)",
      });
      gsap.to(".item-4", {
        duration: 0,
        filter: "blur(0)",
      });
      gsap.to(".item-3", {
        duration: 2,
        x: 100,
      });
    }
  });
});

document.querySelector(".restart").addEventListener("click", () => {
  gsap.to(".right", {
    duration: 2,
    y: 0,
    ease: "elastic.out(1,0.75)",
  });
  gsap.to(".left", {
    duration: 2,
    x: 0,
    ease: "elastic.out(1,0.75)",
  });
  gsap.to(".item-2", {
    duration: 2,
    scale: 0.8,
    ease: "elastic.out(1,0.85)",
  });
  gsap.to(".item-2", {
    duration: 0,
    filter: "blur(12px)",
  });
  gsap.to(".item-1", {
    duration: 2,
    x: 0,
  });
  gsap.to(".item-3", {
    duration: 2,
    scale: 0.6,
    ease: "elastic.out(1,0.85)",
  });
  gsap.to(".item-3", {
    duration: 0,
    filter: "blur(12px)",
  });
  gsap.to(".item-2", {
    duration: 2,
    x: 0,
  });
  gsap.to(".item-4", {
    duration: 2,
    scale: 0.4,
    ease: "elastic.out(1,0.85)",
  });
  gsap.to(".item-4", {
    duration: 0,
    filter: "blur(12px)",
  });
  gsap.to(".item-3", {
    duration: 2,
    x: 0,
  });
});