add progress bar

axherrm · Jan 15, 2024 · 092cadc · 092cadc
1 parent f038c7f
commit 092cadc
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<main>
+<main #outest_container>
   <div #background style="width: 100vw; height: 100vh; display: flex; position: fixed; z-index: -100">
 <!--    <img-->
 <!--      srcset= "../assets/avatar_600.png 600w,-->
@@ -18,6 +18,8 @@
       alt="" style="min-width:100vw; min-height:100vh; width: auto; height: auto; object-fit: cover;"/>
   </div>
 
+  <div class="progressbar-container"><div #progress_bar class="progressbar"></div></div>
+
   <div #lang_selector style="right: calc(2vh + 64px); top: 2vh; position: fixed; z-index: 1000; display: var(--display-side-elements)">
     <p-speedDial [model]="dataService.languagesMenuItems" direction="down" showIcon="pi pi-language" class="language-speed-dial" buttonClassName="language-button"></p-speedDial>
   </div>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -25,6 +25,21 @@
   }
 }
 
+.progressbar-container {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  .progressbar {
+    position: relative;
+    width: 100%;
+    height: 0.5vh;
+    transform-origin: 0 50%;
+    background-color: wheat;
+  }
+}
+
 :host ::ng-deep {
 
   .p-timeline-event-separator {

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -36,9 +36,10 @@ import "./js/lenis.js";
 export class AppComponent {
 
   @ViewChild("background", {read: ElementRef}) background: ElementRef;
+  @ViewChild("outest_container", {read: ElementRef}) outestContainer: ElementRef;
+  @ViewChild("progress_bar", {read: ElementRef}) progressBar: ElementRef;
   @ViewChild("education_card", {read: ElementRef}) educationCard: ElementRef;
   @ViewChild("lang_selector", {read: ElementRef}) langSelector: ElementRef;
-  @ViewChild("skills_container", {read: ElementRef}) skillsContainer: ElementRef;
 
   dataService: DataService;
 
@@ -52,6 +53,23 @@ export class AppComponent {
     for (let el of document.getElementsByClassName("alarm-clock-animated")) {
       this.addAlarmClockAnimation(el);
     }
+    this.addProgressBarAnimation();
+  }
+
+  addProgressBarAnimation() {
+    const tl: gsap.core.Timeline = gsap.timeline({
+      scrollTrigger: {
+        start: "top top",
+        trigger: this.outestContainer.nativeElement,
+        end: "bottom bottom",
+        scrub: true,
+      }
+    });
+    tl.fromTo(this.progressBar.nativeElement, {
+      transform: "scaleX(0)"
+    }, {
+      transform: "scaleX(1)"
+    })
   }
 
   addLangButtonAnimation() {