Angular Homepage Loads Scrolled to Middle Section Instead of Top (GSAP ScrollTrigger Issue)

Problem


I'm building an Angular application with a homepage that has multiple sections including a hero section with video background and a horizontal scrolling "how it works" section using GSAP ScrollTrigger. However, when the page loads, instead of starting at the top to show the hero video, it automatically scrolls down to the "how it works" section.

Expected Behavior

• Page should load at the top (scroll position 0,0)
• Hero section with video should be visible first
• User should be able to scroll down to see other sections

Actual Behavior

• Page loads already scrolled to the "how it works" section
• Hero section is not visible on initial load
• User has to scroll up to see the hero content

Code Structure

Component Template (Simplified)


<!-- Hero Section with Video Background -->
<section class="hero-section section relative min-h-screen">
<video #heroVideo autoplay muted loop playsinline class="w-full h-full object-cover">
<source src="/landing_page/landing_page.mp4" type="video/mp4">
</video>
<!-- Hero content -->
</section>

<!-- How it Works Section with Horizontal Scroll -->
<section class="how-it-works-pinned-viewport section">
<div class="how-it-works-track">
<article class="how-it-works-panel">Panel 1</article>
<article class="how-it-works-panel">Panel 2</article>
<article class="how-it-works-panel">Panel 3</article>
</div>
</section>


Component TypeScript


export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {

ngOnInit(): void {
console.log(' HomeComponent ngOnInit called');

// Attempt to ensure page starts at the top
if (window.scrollY !== 0) {
console.log(' Resetting scroll position to top');
window.scrollTo(0, 0);
}

gsap.registerPlugin(ScrollTrigger);
this.loadNearbyStations();
}

ngAfterViewInit(): void {
try {
this.initializeVideoPlayer();
this.setupHowItWorksAnimation(); // This might be causing the issue
this.initializeLottieChainOnVisible();
} catch (error) {
console.error('❌ Error in ngAfterViewInit:', error);
}
}

private setupHowItWorksAnimation(): void {
const howItWorksViewport = document.querySelector('.how-it-works-pinned-viewport') as HTMLElement;
const track = document.querySelector('.how-it-works-track') as HTMLElement;
const panels = gsap.utils.toArray(".how-it-works-panel") as HTMLElement[];

if (!howItWorksViewport || !track) {
return;
}

// Horizontal scroll animation
const tween = gsap.to(track, {
x: () => -(track.scrollWidth - document.documentElement.clientWidth) + "px",
ease: "none",
});

const scrollTrigger = ScrollTrigger.create({
trigger: howItWorksViewport,
animation: tween,
start: "top top",
end: () => "+=" + (track.scrollWidth - document.documentElement.clientWidth),
scrub: 0.2,
pin: true,
pinSpacing: true, // Adds space after pinning
invalidateOnRefresh: true,
snap: {
snapTo: 1 / (panels.length - 1),
duration: { min: 0.2, max: 0.3 },
ease: "power1.inOut"
},
markers: true // Debug markers enabled
});

// Force scroll reset after ScrollTrigger is created
setTimeout(() => {
window.scrollTo(0, 0);
ScrollTrigger.refresh();
}, 0);
}

ngOnDestroy(): void {
// Clean up ScrollTriggers
const triggers = ScrollTrigger.getAll();
triggers.forEach((trigger: any) => trigger.kill());
}
}

CSS (Relevant parts)


.section {
height: 100vh;
position: relative;
}

.hero-section {
position: relative;
}

.how-it-works-pinned-viewport {
width: 100vw;
overflow: hidden;
position: relative;
z-index: 20;
}

.how-it-works-track {
display: flex;
height: 100%;
position: relative;
z-index: 1;
will-change: transform;
}

.how-it-works-panel {
width: 100vw;
height: 100%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}

What I've Tried

1. Manual scroll reset in ngOnInit: Added window.scrollTo(0, 0) but it seems to be overridden later
2. Delayed scroll reset: Tried using setTimeout to reset scroll position after component initialization
3. Router scroll position: Checked Angular router configuration for scroll position restoration
4. CSS debugging: Added console logs to track scroll position at different lifecycle stages

Debug Output


The console logs show:

HomeComponent constructor called
Initial scroll position: { x: 0, y: 0, documentHeight: 4000, windowHeight: 969 }
HomeComponent ngOnInit called
Scroll position at ngOnInit: { x: 0, y: 0, documentHeight: 4000, windowHeight: 969 }
Resetting scroll position to top
️ HomeComponent ngAfterViewInit called
Scroll position at ngAfterViewInit: { x: 0, y: 0, documentHeight: 4000, windowHeight: 969 }
⚙️ Setting up how-it-works animation
✅ ScrollTrigger created: { start: 969, end: 1938, trigger: [object HTMLElement] }
Scroll position after ScrollTrigger setup: { x: 0, y: 969 } // ← Issue happens here!

Continue reading...