1/* 2 * File: Animations.js 3 * Project: zes-web 4 * Created Date: 17.02.2025 19:05:16 5 * Modified Date: 17.02.2025 19:05:20 6 * Author: Ferdi Sahin 7 * Copyright (c) 2025 craff 8 */ 9 10export const Animations = () => { 11 gsap.registerPlugin(ScrollTrigger); 12 13 // ScrollAnimationSection handling for all screen sizes 14 if (window.outerWidth >= 1200) { 15 const scrollAnimationSection = document.getElementById( 16 "ScrollAnimationSection" 17 ); 18 19 if (scrollAnimationSection) { 20 const scrollAnimationSectionContent = 21 scrollAnimationSection.querySelector(".tab-content"); 22 const tabList = scrollAnimationSection.querySelector(".tab-list"); 23 24 if (scrollAnimationSectionContent) { 25 const content1 = 26 scrollAnimationSectionContent.querySelector(".content-1"); 27 const content2 = 28 scrollAnimationSectionContent.querySelector(".content-2"); 29 const content3 = 30 scrollAnimationSectionContent.querySelector(".content-3"); 31 32 const button1Progress = 33 tabList.querySelector("#button1 .progress"); 34 const button2Progress = 35 tabList.querySelector("#button2 .progress"); 36 const button3Progress = 37 tabList.querySelector("#button3 .progress"); 38 39 const button1 = tabList.querySelector("#button1"); 40 const button2 = tabList.querySelector("#button2"); 41 const button3 = tabList.querySelector("#button3"); 42 43 // Basit dikey ortalama için CSS ekleyelim 44 const styleElement = document.createElement('style'); 45 styleElement.textContent = ` 46 #ScrollAnimationSection { 47 position: relative; 48 z-index: 10; 49 } 50 51 .pin-spacer { 52 display: flex !important; 53 align-items: center !important; 54 justify-content: center !important; 55 } 56 `; 57 document.head.appendChild(styleElement); 58 59 // Initial state for content 60 gsap.set([content2, content3], { 61 opacity: 0, 62 display: 'none' 63 }); 64 65 gsap.set(content1, { 66 opacity: 1, 67 display: 'block' 68 }); 69 70 // Sade ve doÄrudan bir ScrollTrigger yapılandırması 71 const content1Timeline = gsap.timeline({ 72 scrollTrigger: { 73 trigger: "#ScrollAnimationSection", 74 start: "center center", // Ekranın ortasında baÅlat 75 end: "+=300%", 76 pin: true, 77 pinSpacing: true, 78 scrub: 1, 79 markers: false, 80 } 81 }); 82 83 content1Timeline.to(content1, { 84 opacity: 1, 85 duration: 1, 86 }); 87 88 content1Timeline.to( 89 button1Progress, 90 { 91 width: "100%", 92 duration: 1, 93 }, 94 "<" 95 ); 96 97 content1Timeline.to( 98 button1, 99 { 100 color: "#585858", 101 }, 102 "<" 103 ); 104 105 content1Timeline.to(content1, { 106 opacity: 0, 107 duration: 1, 108 }); 109 110 content1Timeline.to(content2, { 111 opacity: 1, 112 duration: 1, 113 display: 'block' 114 }); 115 116 content1Timeline.to( 117 button2Progress, 118 { 119 width: "100%", 120 duration: 1, 121 }, 122 "<" 123 ); 124 125 content1Timeline.to( 126 button2, 127 { 128 color: "#000", 129 }, 130 "<" 131 ); 132 133 content1Timeline.to(content2, { 134 opacity: 0, 135 duration: 1, 136 }); 137 138 content1Timeline.to(content3, { 139 opacity: 1, 140 duration: 1, 141 display: 'block' 142 }); 143 144 content1Timeline.to( 145 button3Progress, 146 { 147 width: "100%", 148 duration: 1, 149 }, 150 "<" 151 ); 152 153 content1Timeline.to( 154 button3, 155 { 156 color: "#000", 157 }, 158 "<" 159 ); 160 } 161 } 162 } 163 164 if (window.outerWidth >= 1200) { 165 const fixedContentSection = document.getElementById("fixedContent"); 166 // const fixedPagination = document.getElementById('fixedPagination') 167 168 // const paginationDot1 = fixedPagination.querySelector('#one') 169 // const paginationDot2 = fixedPagination.querySelector('#two') 170 // const paginationDot3 = fixedPagination.querySelector('#three') 171 // const paginationDot4 = fixedPagination.querySelector('#four') 172 173 const fixedContentStep1 = fixedContentSection?.querySelector("#step1"); 174 const fixedContentStep2 = fixedContentSection?.querySelector("#step2"); 175 const fixedContentStep3 = fixedContentSection?.querySelector("#step3"); 176 const fixedContentStep4 = fixedContentSection?.querySelector("#step4"); 177 178 if (fixedContentSection) { 179 const contentTimeline = gsap.timeline({ 180 scrollTrigger: { 181 trigger: "#fixedContent", 182 start: "top top", 183 end: "+=300%", 184 pin: true, 185 scrub: 1, 186 markers: false, 187 }, 188 }); 189 190 // Initial state 191 gsap.set( 192 [fixedContentStep2, fixedContentStep3, fixedContentStep4], 193 { opacity: 0 } 194 ); 195 gsap.set(fixedContentStep1, { opacity: 1 }); 196 197 // // Reset all pagination dots 198 // gsap.set([paginationDot1, paginationDot2, paginationDot3, paginationDot4], { 199 // className: "bg-[#B1BDCA] rounded-full size-1.5" 200 // }) 201 202 // // Set initial active dot 203 // gsap.set(paginationDot1, { 204 // className: "button-radial rounded-full size-1.5" 205 // }) 206 207 contentTimeline 208 // Step 1 -> 2 209 .to(fixedContentStep1, { 210 opacity: 0, 211 duration: 0.5, 212 }) 213 .to(fixedContentStep2, { 214 opacity: 1, 215 duration: 0.5, 216 }) 217 // Step 2 -> 3 218 .to(fixedContentStep2, { 219 opacity: 0, 220 duration: 0.5, 221 }) 222 .to(fixedContentStep3, { 223 opacity: 1, 224 duration: 0.5, 225 }) 226 227 // Step 3 -> 4 228 .to(fixedContentStep3, { 229 opacity: 0, 230 duration: 0.5, 231 }) 232 .to(fixedContentStep4, { 233 opacity: 1, 234 duration: 0.5, 235 }); 236 } 237 238 const animateText1 = document.getElementById("animateText1"); 239 const animateText2 = document.getElementById("animateText2"); 240 241 if (animateText1 && animateText2) { 242 // Initial state 243 gsap.set([animateText1, animateText2], { 244 opacity: 0, 245 y: 50, 246 }); 247 248 // Timeline for text animations 249 const textTimeline = gsap.timeline({ 250 scrollTrigger: { 251 trigger: "#textSection", 252 start: "top center", 253 end: "+=50%", 254 scrub: 1, 255 toggleActions: "play none none reverse", 256 }, 257 }); 258 259 // Animate text1 first 260 textTimeline 261 .to(animateText1, { 262 opacity: 1, 263 y: 0, 264 duration: 1, 265 }) 266 // Then animate text2 267 .to( 268 animateText2, 269 { 270 opacity: 1, 271 y: 0, 272 duration: 1, 273 }, 274 "-=0.5" 275 ); // Start slightly before text1 animation ends 276 // Fade out both texts on scroll 277 // .to([animateText1, animateText2], { 278 // opacity: 0, 279 // y: -50, 280 // duration: 2, 281 // stagger: 0.2, 282 // }); 283 } 284 285 const aboutText1 = document.getElementById("aboutText1"); 286 const aboutText2 = document.getElementById("aboutText2"); 287 288 if (aboutText1 && aboutText2) { 289 gsap.set([aboutText1, aboutText2], { 290 opacity: 0, 291 y: 50, 292 }); 293 294 const textTimeline = gsap.timeline({ 295 scrollTrigger: { 296 trigger: "#aboutSection", 297 start: "top center", 298 end: "+=75%", 299 // scrub: 1, 300 toggleActions: "play none none reverse", 301 }, 302 }); 303 304 textTimeline 305 .to(aboutText1, { 306 opacity: 1, 307 y: 0, 308 duration: 1, 309 }) 310 .to( 311 aboutText2, 312 { 313 opacity: 1, 314 y: 0, 315 duration: 1, 316 }, 317 "-=0.5" 318 ); 319 } 320 321 const section5 = document.getElementById("section5"); 322 323 if (section5) { 324 const section5Image = section5.querySelector("#section5Image"); 325 326 const section5Timeline = gsap.timeline({ 327 scrollTrigger: { 328 trigger: "#section5", 329 start: "top top", 330 // end: "+=25%", 331 // scrub: 1, 332 toggleActions: "play none none reverse", 333 }, 334 }); 335 336 section5Timeline.to(section5Image, { 337 opacity: 1, 338 duration: 1, 339 }); 340 341 const section5Boxes = section5.querySelector("#section5Boxes"); 342 const section5Boxes1 = 343 section5Boxes.querySelector("#section5Boxes1"); 344 const section5Boxes2 = 345 section5Boxes.querySelector("#section5Boxes2"); 346 347 // Ãstteki kutuları ayrı ayrı seçelim 348 const topBoxes = section5Boxes1.querySelectorAll( 349 ".bg-\\[\\#E6EAEE\\]" 350 ); 351 const box1 = topBoxes[0]; 352 const box2 = topBoxes[1]; 353 const box3 = topBoxes[2]; 354 355 // Alttaki kutuları ayrı ayrı seçelim 356 const bottomBoxes = section5Boxes2.querySelectorAll( 357 ".w-full.max-w-\\[400px\\]" 358 ); 359 const box4 = bottomBoxes[0]; 360 const box5 = bottomBoxes[1]; 361 362 // Set initial state for all boxes 363 gsap.set([box1, box2, box3, box4, box5], { 364 opacity: 0, 365 y: 30, 366 }); 367 368 const section5BoxesTimeline = gsap.timeline({ 369 scrollTrigger: { 370 trigger: "#section5Boxes", 371 start: "top 30%", // Trigger earlier in the viewport 372 end: "+=300%", // Make the scroll distance longer for better control 373 pin: true, // Re-enable pin 374 pinSpacing: true, // Ensure proper spacing 375 scrub: 1, // Smoother scrubbing with more direct control 376 markers: false, // Set to true for debugging 377 anticipatePin: 1, // Helps with smoother pinning 378 }, 379 }); 380 381 // Ãstteki kutuları sırasıyla animasyon uygulayalım 382 section5BoxesTimeline 383 // Ä°lk kutu 384 .to(box1, { 385 opacity: 1, 386 y: 0, 387 duration: 0.3, 388 }) 389 // Küçük bir gecikme 390 .to({}, { duration: 0.2 }) 391 392 // Ä°kinci kutu 393 .to(box2, { 394 opacity: 1, 395 y: 0, 396 duration: 0.3, 397 }) 398 // Küçük bir gecikme 399 .to({}, { duration: 0.2 }) 400 401 // Ãçüncü kutu
402 .to(box3, { 403 opacity: 1, 404 y: 0, 405 duration: 0.3, 406 }) 407 // Ãstteki kutular tamamlandıktan sonra biraz daha uzun bir gecikme 408 .to({}, { duration: 0.5 }) 409 410 // Alttaki ilk kutu 411 .to(box4, { 412 opacity: 1, 413 y: 0, 414 duration: 0.3, 415 }) 416 // Küçük bir gecikme 417 .to({}, { duration: 0.2 }) 418 419 // Alttaki ikinci kutu 420 .to(box5, { 421 opacity: 1, 422 y: 0, 423 duration: 0.3, 424 }) 425 // Animasyon sonunda biraz bekleme 426 .to({}, { duration: 0.5 }); 427 } 428 } 429};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.