I'm building a site using the Astro framework, where there will be video animations on scroll.
Unfortunately using this framework it is not possible for me to create a demo on CodePen but I recorded a video to show the problem (here is the link to the site in production).
The problem is that sometimes when I refresh the page the second section overlaps the first after a slight scroll (you notice when the error occurs because you see the "start" marker of the second section just below the first section, and therefore before the "end" marker of the first section).
In the video, from seconds 01 to 07 the site loaded ScrollTrigger correctly, while from second 08 onwards, after the refresh, as you can see, the second section ends above the first, before it can finish scrolling.
Do you have any idea what it could be even without having a demo? is this a known scrollTrigger issue or can it be caused by the framework?
This is the index.astro:
---
import Layout from '../layouts/Layout.astro';
import VideoScroll from '../components/VideoScroll.astro';
---
<script>
gsap.registerPlugin(ScrollTrigger);
</script>
<Layout title="TUC">
<main>
<section class="container relative min-h-screen py-6 mx-auto" id="home">
<VideoScroll
client:load
section={1}
main="Hello TUC"
title="LOREM IPSUM"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
video="/video/esploso_edit.mp4"
/>
</section>
<section class="container relative min-h-screen py-6 mx-auto" id="technology">
<VideoScroll
client:load
section={2}
main="All in one"
title="LOREM IPSUM"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
video="/video/sedile_edit.mp4"
/>
</section>
</main>
</Layout>
And this is how I created the components (.astro):
---
export interface Props {
section: number;
main: string;
video: string;
title: string;
description: string;
}
const { section, main, video, title, description } = Astro.props;
---
<script>
class VideoScroll extends HTMLElement {
constructor() {
super();
// Read the message from the data attribute.
const section = this.dataset.section;
const IntroVideoRef = document.getElementById(`section-${section}`);
const videoRef = document.getElementById(`video-section-${section}`);
videoRef.onloadedmetadata = function() {
const pauseVideo = () => {
videoRef.removeAttribute("autoplay");
videoRef.currentTime = 0;
videoRef.pause();
gsap.delayedCall(4, () => ScrollTrigger.refresh());
}
if (videoRef) {
pauseVideo()
}
const videoDuration = this.duration;
ScrollTrigger.create({
trigger: IntroVideoRef,
scrub: true,
pin: IntroVideoRef,
start: '-100',
end: `+=${videoDuration * 300}`,
markers: true,
onUpdate: function(self) {
if (videoRef) {
const scrollPos = self.progress;
const videoCurrentTime = videoDuration * scrollPos;
if(videoCurrentTime) {
videoRef.currentTime = videoCurrentTime;
}
}
},
});
console.log(videoTime)
};
}
}
customElements.define('video-scroll', VideoScroll);
</script>
<video-scroll data-section={section}>
<div class='w-full h-full hyperboards-container min-h-[200px] md:min-h-[300px]' id={`section-${section}`}>
<div class='flex justify-end w-full translate-y-[30px] lg:translate-y-[70px]'>
<h2 class='text-4xl font-bold md:text-7xl text-grey'>
{main}
</h2>
</div>
<div class='grid grid-cols-1 gap-4 md:grid-cols-12'>
<div class='w-full col-span-1 col-start-1 overflow-hidden rounded-xl video-col md:col-span-7 md:col-start-2'>
<video muted playsinline autoplay disableRemotePlayback id={`video-section-${section}`} class="min-h-[200px]">
<source src={video} type="video/mp4"/>
</video>
</div>
<div class='col-span-1 section-text md:col-span-4'>
<h4 class='bold text-[25px] text-white'>{title}</h4>
<p class='light text-light-grey'>{description}</p>
</div>
</div>
</div>
</video-scroll>
<style>
.section-text {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
</style>
You will probably have to refresh a few times to get both versions (working and not working).
