https://lossanddamageobservatory.org/website_assets/js/gsap.js

1let sections = gsap.utils.toArray(".step-description");
2
3gsap.to(".mycontainer", {
4  scrollTrigger: {
5    trigger: ".mycontainer",
6    // markers: true,
7    pin: true,
8    start: "top",
9    // end: 900,
10    scrub: true
11  }
12});
13
14sections.forEach((element, i) => {
15  var tl = gsap.timeline({});
16  tl.from(element, { autoAlpha: 0, display: 'none' });
17  tl.to(element, {
18    autoAlpha: 1,
19    display: "block",
20    scrub: 1,
21    stagger: 4,
22    scrollTrigger: {
23      trigger: element,
24      scrub: true,
25      stagger: 1,
26      // markers: { startColor: "red", endColor: "red" },  
27      start: "+=" + 40 * (i + 1),
28      end: "+=" + 80 * (i + 1)
29    }
30  });
31});
32
33const container = document.querySelector('.Banner_banner__mzsNQ');
34let targetScroll = 0;
35
36const container1 = document.querySelector('.Banner_bannerTwo__lx9bG');
37let targetScroll1 = 0;
38
39window.addEventListener('wheel', (e) => {
40  targetScroll += e.deltaY * 0.5;
41  targetScroll1 -= e.deltaY * 0.5;
42
43  gsap.to(container, {
44    x: -targetScroll,
45    duration: 1,
46    ease: 'power2.out'
47  });
48
49  gsap.to(container1, {
50    x: -targetScroll1,
51    duration: 1,
52    ease: 'power2.out'
53  });
54});
55
56
57
58
59window.onload = function () {
60  gsap.registerPlugin(ScrollTrigger);
61
62  const targets = document.querySelectorAll(".scrollist li");
63
64  gsap.set(".scrollist", { autoAlpha: 1 });
65
66  const timeline = gsap.timeline({
67    defaults: {
68      overwrite: "auto",
69      ease: "power1"
70    },
71    scrollTrigger: {
72      end: "+=300%",
73      pin: true,
74      pinSpacing: true,
75      scrub: true,
76      start: "top top",
77      trigger: ".scrollist"
78    }
79  });
80
81  const stagger = 0.8;
82  const duration = 1;
83
84  gsap.set(".scrollist", { autoAlpha: 1 });
85
86  timeline.set(targets, { transformOrigin: "center bottom" });
87
88  timeline
89    .from(targets, {
90      duration: duration,
91      opacity: 0,
92      rotationX: 0,
93      rotationY: 0,
94      scale: 1,
95      stagger: stagger,
96      yPercent: 60
97    })
98    .to(
99      targets,
100      {
101        duration: duration,
102        opacity: 0,
103        rotationX: 20,
104        rotationY: 2,
105        scale: 0.75,
106        stagger: stagger,
107        y: -100
108      },
109      stagger
110    );
111};
112
113
114
115
116let items = gsap.utils.toArray(".clicablemore"),
117  cursor = document.querySelector("#Cursor"),
118  xTo = gsap.quickTo(cursor, "x", { duration: 0.3, ease: "power3" }),
119  yTo = gsap.quickTo(cursor, "y", { duration: 0.3, ease: "power3" });
120
121// center cursor on pointer, and scale it to 20px
122gsap.set(cursor, { scale: 0.2, xPercent: -50, yPercent: -50 });
123
124window.addEventListener("mousemove", (e) => {
125  xTo(e.clientX);
126  yTo(e.clientY);
127});
128
129items.forEach((item) => {
130  item.addEventListener("mouseenter", () => {
131    cursor.textContent = "Read More";
132    gsap.to(cursor, { scale: 2, duration: 0.2, overwrite: "auto" })
133  });
134  item.addEventListener("mouseleave", () => {
135    cursor.textContent = "";
136    gsap.to(cursor, { scale: 0.2, duration: 0.2, overwrite: "auto" })
137  });
138});
139
140
141
142$(document).ready(function () {
143  $('#cloned').append($('#cloned div').clone()); // Clone the items for seamless looping
144
145  // Calculate the width of the entire set of items
146  var totalWidth = $('#cloned').width();
147
148  // Set up the infinite scroll animation
149  function startMarquee() {
150    TweenMax.to($('#cloned'), 20, {
151      x: -totalWidth / 2,  // Move the entire #cloned div to the left 
152      repeat: -1,           // Repeat the animation infinitely
153      ease: Power0.easeNone, // Smooth motion without easing
154      onComplete: startMarquee // Restart the animation when complete
155    });
156  } 
157 
158  startMarquee(); // Start the marquee animation
159});
160
161
162
163
164
165
166  
167const buttons = document.querySelectorAll('a.button'); // Select all buttons with the class "button"
168
169buttons.forEach((button) => {
170  const spotlight = document.createElement('div');
171  spotlight.classList.add('button__spotlight');
172  button.appendChild(spotlight); // Append a unique spotlight div to each button
173
174  button.addEventListener('mousemove', function (evt) {
175    const movX = evt.clientX - this.getBoundingClientRect().x;
176    gsap.to(spotlight, {
177      x: movX,
178      scale: 20,
179      duration: 0.3
180    });

181  });
182
183  button.addEventListener('mouseleave', function (evt) {
184    const movX = evt.clientX - this.getBoundingClientRect().x;
185    gsap.to(spotlight, {
186      x: movX,
187      scale: 0,
188      duration: 0.3
189    });
190  });
191});
192
193
194
195