fix language change animation bugs

axherrm · Jan 17, 2024 · 36feeb8 · 36feeb8
1 parent 5295f40
commit 36feeb8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -43,17 +43,31 @@ export class AppComponent {
 
   dataService: DataService;
 
+  alarmClockTimelines: gsap.core.Timeline[] = [];
+
   constructor(dataService: DataService) {
     this.dataService = dataService;
+    this.dataService.langChange.subscribe(() => this.onLangChange());
   }
 
   ngAfterViewInit(): void {
     this.addLangButtonAnimation();
+    this.addProgressBarAnimation();
     // @ts-ignore
     for (let el of document.getElementsByClassName("alarm-clock-animated")) {
       this.addAlarmClockAnimation(el);
     }
-    this.addProgressBarAnimation();
+  }
+
+  onLangChange() {
+    this.alarmClockTimelines.forEach(tl => tl.kill());
+    this.alarmClockTimelines = [];
+
+    let objectsToAnimate = document.getElementsByClassName("alarm-clock-animated");
+    // @ts-ignore
+    for (let el of objectsToAnimate) {
+      this.addAlarmClockAnimation(el);
+    }
   }
 
   addProgressBarAnimation() {
@@ -134,6 +148,7 @@ export class AppComponent {
       rotationX: "30deg",
       transformPerspective: "1400px",
     })
+    this.alarmClockTimelines.push(bottomHalfTl, upperHalfTl);
   }
 
 }
diff --git a/src/app/data/data.service.ts b/src/app/data/data.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {EventEmitter, Injectable} from '@angular/core';
 import * as educationJson from '../../data/education.json';
 import * as generalJson from '../../data/general.json';
 import * as experienceJson from '../../data/experience.json';
@@ -22,6 +22,8 @@ export class DataService {
   skillCategories: SkillCategory[];
   skills: Skill[];
 
+  langChange: EventEmitter<void> = new EventEmitter<void>(true);
+
   constructor() {
     this.determineLanguage();
   }
@@ -72,7 +74,10 @@ export class DataService {
       this.languagesMenuItems.push({
         id: langPack.id,
         icon: `fi fis fi-${langPack.isoAlpha2} flag-icon${flagActive}`,
-        command: () => this.setLang(lang)
+        command: () => {
+          this.setLang(lang);
+          this.langChange.emit();
+        }
       })
     }