Merge pull request #3 from axherrm/feat/alarm-clock-animation

Feat: Alarm clock animation
axherrm · Jan 7, 2024 · 0d20358 · 0d20358
2 parents b907846 + 1d85be0
commit 0d20358
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 10 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -30,33 +30,33 @@ <h2 id="main-subheading">Software Engineer</h2>
   </div>
 
   <div style="text-align: center">
-    <heading-card #education_card [heading]="dataService.languagePack.education" type="light"></heading-card>
+    <heading-card #education_card [heading]="dataService.languagePack.education" type="light" styleClass="alarm-clock-animated"></heading-card>
     <p-timeline id="eduction-tl" [value]="dataService.education" align="alternate" [style]="{'width': '70%', 'display': 'inline-block'}">
       <ng-template pTemplate="marker">
         <span class="dot"></span>
       </ng-template>
       <ng-template pTemplate="content" let-educationItem>
         <timeline-card type="light" [heading]="educationItem.heading" [subheading]="educationItem.subheading"
-                       [content]="educationItem.content" [bulletPoints]="educationItem.bulletPoints">
+                       [content]="educationItem.content" [bulletPoints]="educationItem.bulletPoints" styleClass="alarm-clock-animated">
         </timeline-card>
       </ng-template>
       <ng-template pTemplate="opposite" let-educationItem>
-        <p-badge [value]="educationItem.date" size="large" styleClass="timeline-date-dark"></p-badge>
+        <p-badge [value]="educationItem.date" size="large" styleClass="timeline-date-dark alarm-clock-animated"></p-badge>
       </ng-template>
     </p-timeline>
 
-    <heading-card #experience_card [heading]="dataService.languagePack.experience" type="dark"></heading-card>
+    <heading-card #experience_card [heading]="dataService.languagePack.experience" type="dark" styleClass="alarm-clock-animated"></heading-card>
     <p-timeline id="experience-tl" [value]="dataService.experience" align="alternate" [style]="{'width': '70%', 'display': 'inline-block'}">
       <ng-template pTemplate="marker">
         <span class="dot"></span>
       </ng-template>
       <ng-template pTemplate="content" let-experienceItem>
         <timeline-card type="dark" [heading]="experienceItem.heading" [subheading]="experienceItem.subheading"
-                       [content]="experienceItem.content" [bulletPoints]="experienceItem.skills">
+                       [content]="experienceItem.content" [bulletPoints]="experienceItem.skills" styleClass="alarm-clock-animated">
         </timeline-card>
       </ng-template>
       <ng-template pTemplate="opposite" let-experienceItem>
-        <p-badge [value]="experienceItem.date" size="large" styleClass="timeline-date-light"></p-badge>
+        <p-badge [value]="experienceItem.date" size="large" styleClass="timeline-date-light alarm-clock-animated"></p-badge>
       </ng-template>
     </p-timeline>
   </div>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -49,4 +49,22 @@
     border: var(--border-light);
   }
 
+  .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) {
+    .p-timeline-event-content timeline-card p-card div {
+      transform-origin: right top;
+    }
+    .p-timeline-event-opposite p-badge span {
+      transform-origin: left top;
+    }
+  }
+
+  .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n + 1) {
+    .p-timeline-event-content timeline-card p-card div {
+      transform-origin: left top;
+    }
+    .p-timeline-event-opposite p-badge span {
+      transform-origin: right top;
+    }
+  }
+
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -34,6 +34,11 @@ export class AppComponent {
 
   ngAfterViewInit(): void {
     this.addLangButtonAnimation();
+    // this.addAlarmClockAnimation(this.educationCard.nativeElement.children[0]);
+    // @ts-ignore
+    for (let el of document.getElementsByClassName("alarm-clock-animated")) {
+      this.addAlarmClockAnimation(el);
+    }
   }
 
   addLangButtonAnimation() {
@@ -55,4 +60,48 @@ export class AppComponent {
         ease: "power1.in"
       }, "<");
   }
+
+  addAlarmClockAnimation(el: HTMLElement) {
+    const bottomHalfTl: gsap.core.Timeline = gsap.timeline({
+      scrollTrigger: {
+        start: "top bottom",
+        trigger: el,
+        end: "center center",
+        // markers: true, // TODO remove
+        scrub: true,
+      },
+      defaults: {
+        ease: "power1.out"
+      }
+    });
+    const upperHalfTl: gsap.core.Timeline = gsap.timeline({
+      scrollTrigger: {
+        start: "center center",
+        trigger: el,
+        end: "bottom top",
+        // markers: true, // TODO remove
+        scrub: true,
+      },
+      defaults: {
+        ease: "power1.in"
+      }
+    });
+    bottomHalfTl.fromTo(el, {
+      scale: 0.9,
+      filter: "brightness(0.8)",
+      rotationX: "-30deg",
+      transformPerspective: "1400px",
+    }, {
+      scale: 1,
+      filter: "brightness(1)",
+      rotationX: "0deg",
+      transformPerspective: "1000px",
+    });
+    upperHalfTl.to(el, {
+      scale: 0.9,
+      filter: "brightness(0.8)",
+      rotationX: "30deg",
+      transformPerspective: "1400px",
+    })
+  }
 }
diff --git a/src/app/components/heading-card/heading-card.component.html b/src/app/components/heading-card/heading-card.component.html
@@ -1,4 +1,4 @@
-<p-card [styleClass]="type==='light' ? 'heading-card-light' : 'heading-card-dark'">
+<p-card [styleClass]="cardStyleClass">
   <ng-template pTemplate="content">
     <h1 style="margin: 0">{{ heading }}</h1>
   </ng-template>

diff --git a/src/app/components/heading-card/heading-card.component.ts b/src/app/components/heading-card/heading-card.component.ts
@@ -14,6 +14,17 @@ export class HeadingCardComponent {
 
   @Input() heading: string;
 
-  @Input() type?: "light" | "dark" = "dark";
+  @Input() type: "light" | "dark" = "dark";
+
+  @Input() styleClass: string = "";
+
+  cardStyleClass: string;
+
+  ngAfterContentInit() {
+    this.cardStyleClass = this.type==='light' ? 'heading-card-light' : 'heading-card-dark';
+    if (this.styleClass.length > 0) {
+      this.cardStyleClass += " " + this.styleClass;
+    }
+  }
 
 }
diff --git a/src/app/components/timeline-card/timeline-card.component.html b/src/app/components/timeline-card/timeline-card.component.html
@@ -1,5 +1,5 @@
 <p-card [header]="heading" [subheader]="subheading"
-        [styleClass]="type==='light'? 'timeline-card-light' : 'timeline-card-dark'">
+        [styleClass]="cardStyleClass">
   <div [innerHTML]="content" style="margin-top: 1rem"></div>
   <div *ngIf="bulletPoints" style="margin-top: 1rem">
     <p-badge *ngFor="let bulletPoint of bulletPoints" [value]="bulletPoint"

diff --git a/src/app/components/timeline-card/timeline-card.component.ts b/src/app/components/timeline-card/timeline-card.component.ts
@@ -23,6 +23,17 @@ export class TimelineCardComponent {
   @Input() content: string;
   @Input() bulletPoints?: string[];
 
-  @Input() type?: "light" | "dark" = "light";
+  @Input() type: "light" | "dark" = "light";
+
+  @Input() styleClass: string = "";
+
+  cardStyleClass: string;
+
+  ngAfterContentInit() {
+    this.cardStyleClass = this.type === 'light'? 'timeline-card-light' : 'timeline-card-dark';
+    if (this.styleClass.length > 0) {
+      this.cardStyleClass += " " + this.styleClass;
+    }
+  }
 
 }