https://eatnaked.co/js/components/preloader.js

1export class Preloader {
2  constructor(lenis) {
3    this.progressText = document.querySelector(".loader-text__number");
4    this.clipPath = document.querySelector("#clip-apple");
5
6    this.lenis = lenis.getLenisInstance();
7    this.lenis.stop();
8  }
9
10  update(percent) {
11    this.progressText.textContent = `${percent}`;
12
13    if (percent == 20) {
14      gsap.to(this.clipPath, { duration: 0.5, yPercent: -20, ease: "EA-ease" });
15      gsap.to(".loader-gradient", { duration: 0.5, opacity: 0.2, ease: "linear" });
16    }
17
18    if (percent == 50) {
19      gsap.to(this.clipPath, { duration: 0.5, yPercent: -35, ease: "EA-ease" });
20      gsap.to(".loader-gradient", { duration: 0.5, opacity: 0.4, ease: "linear" });
21    }
22
23    if (percent == 80) {
24      gsap.to(this.clipPath, { duration: 0.5, yPercent: -80, ease: "EA-ease" });
25      gsap.to(".loader-gradient", { duration: 0.5, opacity: 0.8, ease: "linear" });
26    }
27
28    if (percent == 100) {
29      gsap.to(this.clipPath, { duration: 0.5, yPercent: -100, ease: "EA-ease" });
30      gsap.to(".loader-gradient", { duration: 0.5, opacity: 1, ease: "linear" });
31
32      setTimeout(() => {
33        this.complete();
34      }, 700);
35    }
36  }
37
38  complete() {
39    ScrollTrigger.refresh();
40
41    const navbarChildren = document.querySelector(".navbar-container").children;
42    const heroBottomChildren = document.querySelector(".hero-bottom").children;
43
44    let tl = gsap
45      .timeline({ defaults: { ease: "EA-loader" } })
46
47      .to({}, { duration: 1.5 }, 0)
48      .to(".loader-apple, .loader-circles, .loader-gradient", { autoAlpha: 0, duration: 0.6 }, 0.5)
49      .to(".loader-text span", { autoAlpha: 0, yPercent: 100, stagger: 0.05, duration: 0.6 }, 0.3)
50      .to([".loader-layer.is--black", ".loader-layer.is--orange"], { yPercent: 100, duration: 1.3, stagger: 0.03 }, 0.8)
51      .from(navbarChildren, { y: -20, autoAlpha: 0, stagger: 0.1, duration: 1.2, clearProps: "all" }, 1)
52      .from(".markers-inner", { x: 10, autoAlpha: 0, clearProps: "all", duration: 1.2 }, 1.5)
53      .from(heroBottomChildren, { x: -20, autoAlpha: 0, stagger: 0.08, duration: 1.2, clearProps: "all" }, 1.2)
54      .from(".hero-tagline, .hero-h1, .hero-p.is--portrait, .hero .cta-button", { y: 30, autoAlpha: 0, stagger: 0.1, clearProps: "all", duration: 1.2 }, 0.9)
55      .set(".loader", { autoAlpha: 0 })
56      .add(() => {
57        this.lenis.start();
58      });
59  }
60}