animated_site/script.js at main · coder-Rishi05/animated_site · 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
117
const text = document.querySelector(".text");
const lefImagetDiv = document.querySelectorAll(".image-container img");
const rightText = document.querySelectorAll(" .text-container");

const midText = document.querySelector(".text2 ");
const about = document.querySelector(" .about");
const leftImg = document.querySelector(" .scroll-down");

gsap.to(text, {
  delay: 0.4,
  duration: 0.2,
  opacity: 1,
  ease: Power2.Expo,
});

gsap.from(".left-img", {
  opacity: 0,
  y: 50,
  delay: 0.5,
  duration: 0.4,
  ease: Power2.Expo,
});
gsap.from(".top", {
  opacity: 0,
  x: 50,
  delay: 0.5,
  stagger: 0.2,
  duration: 0.4,
  ease: Power2.Expo,
});
gsap.from(".bottom", {
  opacity: 0,
  y: -100,
  delay: 0.5,
  stagger: 0.2,
  duration: 0.4,
  ease: Power2.Expo,
});
gsap.from(midText, {
  opacity: 0,
  stagger: 0.4,
  scrollTrigger: {
    scroller: "body",
    trigger: ".page-2",
    start: "top 30%",
    end: "bottom 100%",
    scrub: 0.2,
  },
});

lefImagetDiv.forEach((e) => {

  gsap.from(e, {
    opacity: 0,
    y: 50,
    duration: 0.7,
    ease: Power2.Expo,
    scrollTrigger: {
      scroller: "body",
      trigger: lefImagetDiv,
      // markers: true,
      start: "top 80%",
      end: "top 50%",
      //scrub: 2,
    },
  });
});

rightText.forEach((e) => {
  gsap.from(e, {
    opacity: 0,
    y: 50,
    // delay: .3,
    duration: 0.7,
    // stagger: 5,
    ease: Power2.Expo,
    scrollTrigger: {
      scroller: "body",
      trigger: rightText,
      // markers: true,
      start: "top 80%",
      end: "top 50%",
      // scrub: 2,
    },
  });
});

// gsap.to(leftImg, {
//   y: 250,
//   delay: 0.4,
//   duration: 0.8,
//   ease: Power2.Expo,
//   scrollTrigger: {
//     trigger: "#img",
//     scroller: "body",
//     markers: true,
//     start: "bottom 70%",
//     end: "bottom 100%",
//     scrub: true,

//   },
// });

gsap.from(about, {
  opacity: 0,
  stagger: 0.4,
  // x:-20,

  scrollTrigger: {
    scroller: "body",
    trigger: ".page-2",
    // markers:true,
    start: "top 10%",
    end: "bottom 100%",
    scrub: true,
  },
});