fraujulian/Personal-Portfolio-Website
1
0
Fork 0
Code Issues Pull Requests 7 Actions Projects Releases 2 Wiki Activity

feat: animations

Browse Source
This commit is contained in:
fraujulian
2026-04-24 18:54:34 +02:00
parent c52856aaba
commit 59ae95b874
3 changed files with 154 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/home.component.html
+2 -7
View File
@@ -69,7 +69,7 @@
[src]="currentPortraitHighlight.image" [src]="currentPortraitHighlight.image"
width="560" width="560"
height="420" height="420"
[alt]="global.firstname + ' highlight'" [alt]="currentPortraitHighlight.text + ' Image'"
/> />
@if (currentPortraitHighlightIndex === 0) { @if (currentPortraitHighlightIndex === 0) {
<span class="portrait-click-hint">Click me!</span> <span class="portrait-click-hint">Click me!</span>
@@ -82,12 +82,7 @@
</div> </div>
</section> </section>
<section <section id="about" class="story-section panel about-scroll-anim-enabled">
id="about"
class="story-section panel about-scroll-anim-enabled"
[class.about-scroll-in-view]="isAboutSectionInView"
[class.about-scroll-anim-ready]="isAboutSectionAnimationReady"
>
<div class="section-heading"> <div class="section-heading">
<p class="eyebrow">About me</p> <p class="eyebrow">About me</p>
</div> </div>
src/app/home/home.component.ts
+102 -85
View File
@@ -25,10 +25,10 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
private preloadedImages: HTMLImageElement[] = []; private preloadedImages: HTMLImageElement[] = [];
private tallestPortraitAspectRatio: number | null = null; private tallestPortraitAspectRatio: number | null = null;
private lockedHeroSectionMinHeight: number = 0; private lockedHeroSectionMinHeight: number = 0;
private projectEntryObserver: IntersectionObserver | null = null;
private aboutSectionObserver: IntersectionObserver | null = null;
private scrollAnimationFrameId: number | null = null; private scrollAnimationFrameId: number | null = null;
private heroHeightAnimationFrameId: number | null = null; private heroHeightAnimationFrameId: number | null = null;
private projectEntryAnimationFrameId: number | null = null;
private aboutSectionAnimationFrameId: number | null = null;
private readonly scheduleNameGradientUpdate: () => void = (): void => { private readonly scheduleNameGradientUpdate: () => void = (): void => {
if (this.scrollAnimationFrameId !== null || typeof window === 'undefined') { if (this.scrollAnimationFrameId !== null || typeof window === 'undefined') {
return; return;
@@ -50,14 +50,32 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
this.updateHeroSectionMinHeight(); this.updateHeroSectionMinHeight();
}); });
}; };
private readonly scheduleProjectEntryRevealUpdate: () => void = (): void => {
if (this.projectEntryAnimationFrameId !== null || typeof window === 'undefined') {
return;
}
this.projectEntryAnimationFrameId = window.requestAnimationFrame((): void => {
this.projectEntryAnimationFrameId = null;
this.updateProjectEntryRevealProgress();
});
};
private readonly scheduleAboutSectionScrollAnimationUpdate: () => void = (): void => {
if (this.aboutSectionAnimationFrameId !== null || typeof window === 'undefined') {
return;
}
this.aboutSectionAnimationFrameId = window.requestAnimationFrame((): void => {
this.aboutSectionAnimationFrameId = null;
this.updateAboutSectionScrollProgress();
});
};
protected readonly global: Global = global; protected readonly global: Global = global;
protected readonly age: number = this.calculateAge(global.birthdate); protected readonly age: number = this.calculateAge(global.birthdate);
protected isLongBioShown: boolean = false; protected isLongBioShown: boolean = false;
protected isLongBioMounted: boolean = false; protected isLongBioMounted: boolean = false;
protected isAboutSectionInView: boolean = true;
protected isAboutSectionAnimationReady: boolean = true;
protected readonly faArrowRight: IconDefinition = faArrowRight; protected readonly faArrowRight: IconDefinition = faArrowRight;
protected readonly faArrowDown: IconDefinition = faArrowDown; protected readonly faArrowDown: IconDefinition = faArrowDown;
protected readonly faEnvelope: IconDefinition = faEnvelope; protected readonly faEnvelope: IconDefinition = faEnvelope;
@@ -283,50 +301,28 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
return; return;
} }
const projectEntries: NodeListOf<Element> = document.querySelectorAll('.project-entry'); window.addEventListener('scroll', this.scheduleProjectEntryRevealUpdate, { passive: true });
projectEntries.forEach((entry: Element): void => { window.addEventListener('resize', this.scheduleProjectEntryRevealUpdate, { passive: true });
entry.classList.add('project-entry-reveal-pending'); this.scheduleProjectEntryRevealUpdate();
});
if (typeof IntersectionObserver === 'undefined') {
projectEntries.forEach((entry: Element): void => {
entry.classList.add('project-entry-visible');
entry.classList.remove('project-entry-reveal-pending');
});
return;
}
this.projectEntryObserver = new IntersectionObserver(
(entries: IntersectionObserverEntry[]): void => {
for (const entry of entries) {
const element: Element = entry.target;
if (entry.isIntersecting) {
window.requestAnimationFrame((): void => {
element.classList.add('project-entry-visible');
element.classList.remove('project-entry-reveal-pending');
});
continue;
}
element.classList.add('project-entry-reveal-pending');
element.classList.remove('project-entry-visible');
}
},
{
root: null,
threshold: 0.18,
rootMargin: '0px 0px -8% 0px',
},
);
projectEntries.forEach((entry: Element): void => {
this.projectEntryObserver?.observe(entry);
});
} }
private destroyProjectEntryRevealObserver(): void { private destroyProjectEntryRevealObserver(): void {
this.projectEntryObserver?.disconnect(); if (typeof window === 'undefined' || typeof document === 'undefined') {
this.projectEntryObserver = null; return;
}
window.removeEventListener('scroll', this.scheduleProjectEntryRevealUpdate);
window.removeEventListener('resize', this.scheduleProjectEntryRevealUpdate);
if (this.projectEntryAnimationFrameId !== null) {
window.cancelAnimationFrame(this.projectEntryAnimationFrameId);
this.projectEntryAnimationFrameId = null;
}
const projectEntries: NodeListOf<HTMLElement> = document.querySelectorAll('.project-entry');
projectEntries.forEach((entry: HTMLElement): void => {
entry.style.removeProperty('--project-entry-progress');
});
} }
private initAboutSectionScrollAnimation(): void { private initAboutSectionScrollAnimation(): void {
@@ -334,49 +330,30 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
return; return;
} }
const aboutSection: HTMLElement | null = document.getElementById('about'); window.addEventListener('scroll', this.scheduleAboutSectionScrollAnimationUpdate, {
if (aboutSection === null) { passive: true,
return; });
} window.addEventListener('resize', this.scheduleAboutSectionScrollAnimationUpdate, {
passive: true,
if (typeof IntersectionObserver === 'undefined') { });
return; this.scheduleAboutSectionScrollAnimationUpdate();
}
this.aboutSectionObserver = new IntersectionObserver(
(entries: IntersectionObserverEntry[]): void => {
for (const entry of entries) {
if (!entry.isIntersecting) {
this.zone.run((): void => {
this.isAboutSectionInView = false;
});
continue;
}
this.zone.run((): void => {
this.isAboutSectionInView = false;
});
window.requestAnimationFrame((): void => {
this.zone.run((): void => {
this.isAboutSectionInView = true;
});
});
}
},
{
root: null,
threshold: 0.05,
rootMargin: '0px 0px -6% 0px',
},
);
this.aboutSectionObserver.observe(aboutSection);
} }
private destroyAboutSectionScrollAnimation(): void { private destroyAboutSectionScrollAnimation(): void {
this.aboutSectionObserver?.disconnect(); if (typeof window === 'undefined' || typeof document === 'undefined') {
this.aboutSectionObserver = null; return;
}
window.removeEventListener('scroll', this.scheduleAboutSectionScrollAnimationUpdate);
window.removeEventListener('resize', this.scheduleAboutSectionScrollAnimationUpdate);
if (this.aboutSectionAnimationFrameId !== null) {
window.cancelAnimationFrame(this.aboutSectionAnimationFrameId);
this.aboutSectionAnimationFrameId = null;
}
const aboutSection: HTMLElement | null = document.getElementById('about');
aboutSection?.style.removeProperty('--about-scroll-progress');
} }
private destroyNameGradientScrollAnimation(): void { private destroyNameGradientScrollAnimation(): void {
@@ -474,6 +451,46 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
); );
} }
private updateAboutSectionScrollProgress(): void {
if (typeof window === 'undefined') {
return;
}
const aboutSection: HTMLElement | null = document.getElementById('about');
if (aboutSection === null) {
return;
}
const sectionRect: DOMRect = aboutSection.getBoundingClientRect();
const viewportHeight: number = window.innerHeight || 1;
const startY: number = viewportHeight * 0.96;
const endY: number = viewportHeight * 0.46;
const totalDistance: number = Math.max(startY - endY, 1);
const rawProgress: number = (startY - sectionRect.top) / totalDistance;
const clampedProgress: number = Math.min(Math.max(rawProgress, 0), 1);
aboutSection.style.setProperty('--about-scroll-progress', clampedProgress.toFixed(4));
}
private updateProjectEntryRevealProgress(): void {
if (typeof window === 'undefined' || typeof document === 'undefined') {
return;
}
const projectEntries: NodeListOf<HTMLElement> = document.querySelectorAll('.project-entry');
const viewportHeight: number = window.innerHeight || 1;
const startY: number = viewportHeight * 0.98;
const endY: number = viewportHeight * 0.56;
const totalDistance: number = Math.max(startY - endY, 1);
projectEntries.forEach((entry: HTMLElement): void => {
const entryRect: DOMRect = entry.getBoundingClientRect();
const rawProgress: number = (startY - entryRect.top) / totalDistance;
const clampedProgress: number = Math.min(Math.max(rawProgress, 0), 1);
entry.style.setProperty('--project-entry-progress', clampedProgress.toFixed(4));
});
}
private calculateAge(birthDateString: string): number { private calculateAge(birthDateString: string): number {
const birthDate: Date = new Date(birthDateString); const birthDate: Date = new Date(birthDateString);
const now: Date = new Date(); const now: Date = new Date();
src/styles.scss
+50 -62
View File
@@ -483,59 +483,30 @@ hr {
margin-top: var(--space-5); margin-top: var(--space-5);
} }
.about-scroll-anim-enabled {
--about-scroll-progress: 0;
}
.about-scroll-anim-enabled .story-copy, .about-scroll-anim-enabled .story-copy,
.about-scroll-anim-enabled .story-detail { .about-scroll-anim-enabled .story-detail {
opacity: 1; opacity: calc(0.12 + (var(--about-scroll-progress) * 0.88));
transform: translate3d(0, 0, 0); will-change: opacity, transform;
} }
.about-scroll-anim-enabled:not(.about-scroll-anim-ready) .story-copy, .about-scroll-anim-enabled .story-copy {
.about-scroll-anim-enabled:not(.about-scroll-anim-ready) .story-detail { transform: translate3d(
opacity: 1; calc((1 - var(--about-scroll-progress)) * -44px),
transform: translate3d(0, 0, 0); calc((1 - var(--about-scroll-progress)) * 26px),
0
);
} }
.about-scroll-anim-enabled.about-scroll-anim-ready .story-copy, .about-scroll-anim-enabled .story-detail {
.about-scroll-anim-enabled.about-scroll-anim-ready .story-detail { transform: translate3d(
opacity: 1; calc((1 - var(--about-scroll-progress)) * 44px),
transform: translate3d(0, 0, 0); calc((1 - var(--about-scroll-progress)) * 26px),
} 0
);
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-copy,
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-detail {
animation-duration: 680ms;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1);
}
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-copy {
animation-name: about-copy-reveal;
}
.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-detail {
animation-name: about-detail-reveal;
}
@keyframes about-copy-reveal {
from {
opacity: 0.12;
transform: translate3d(-44px, 26px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes about-detail-reveal {
from {
opacity: 0.12;
transform: translate3d(44px, 26px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
} }
.story-copy p:first-child, .story-copy p:first-child,
@@ -678,6 +649,7 @@ hr {
} }
.project-entry { .project-entry {
--project-entry-progress: 0;
display: grid; display: grid;
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr);
align-items: center; align-items: center;
@@ -685,33 +657,49 @@ hr {
padding: clamp(1.4rem, 3vw, 2rem); padding: clamp(1.4rem, 3vw, 2rem);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
opacity: 1; opacity: calc(0.12 + (var(--project-entry-progress) * 0.88));
transform: translate3d(0, 0, 0);
transition: transition:
opacity 520ms ease,
transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color var(--transition-fast), border-color var(--transition-fast),
background var(--transition-fast), background var(--transition-fast),
box-shadow var(--transition-fast); box-shadow var(--transition-fast);
will-change: opacity, transform;
} }
.project-entry-reveal-pending.project-entry-from-right { .project-entry.project-entry-from-right {
opacity: 0; transform: translate3d(
transform: translate3d(54px, 16px, 0); calc((1 - var(--project-entry-progress)) * 54px),
calc((1 - var(--project-entry-progress)) * 16px),
0
);
} }
.project-entry-reveal-pending.project-entry-from-left { .project-entry.project-entry-from-left {
opacity: 0; transform: translate3d(
transform: translate3d(-54px, 16px, 0); calc((1 - var(--project-entry-progress)) * -54px),
calc((1 - var(--project-entry-progress)) * 16px),
0
);
} }
.project-entry-visible { .project-entry.project-entry-from-right:hover {
opacity: 1; transform: translate3d(
transform: translate3d(0, 0, 0); calc((1 - var(--project-entry-progress)) * 54px),
calc((1 - var(--project-entry-progress)) * 16px - 2px),
0
);
border-color: rgba(255, 255, 255, 0.24);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.26),
var(--shadow-soft);
} }
.project-entry:hover { .project-entry.project-entry-from-left:hover {
transform: translateY(-2px); transform: translate3d(
calc((1 - var(--project-entry-progress)) * -54px),
calc((1 - var(--project-entry-progress)) * 16px - 2px),
0
);
border-color: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.24);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
box-shadow: box-shadow: