gsap.registerPlugin(ScrollTrigger);
document.addEventListener("DOMContentLoaded", function(){
const contentHolderHeight = document.querySelector(".content-holder").offsetHeight;
const imgHolderHeight = window.innerHeight;
const additionalScrollHeight = window.innerHeight;
const totalBodyHeight = contentHolderHeight + imgHolderHeight + additionalScrollHeight;
document.body.style.height = `${totalBodyHeight}px`;
});
ScrollTrigger.create({
trigger: ".website-content",
start: "-0.1% top",
end: "bottom bottom",
onEnter: () => {
gsap.set(".website-content", {position: 'absolute', top: '195%'});
},
onLeaveBack: () => {
gsap.set(".website-content", {position: 'fixed', top: '0'});
}
})
gsap.to(".header .letters:first-child", {
x: () => -innerWidth * 3,
scale: 10,
ease: "power2.inOut",
scrollTrigger: {
start: "top top",
end: `+=100%`,
scrub: 1
}
});
gsap.to(".header .letters:last-child", {
x: () => innerWidth * 3,
scale: 10,
ease: "power2.inOut",
scrollTrigger: {
start: "top top",
end: `+=100%`,
scrub: 1
}
});
gsap.to(".img-holder", {
rotation: 0,
clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
ease: "power2.inOut",
scrollTrigger: {
start: "top top",
end: `+=90%`,
scrub: 1
}
});
gsap.to(".img-holder img", {
scale: 1,
ease: "power2.inOut",
scrollTrigger: {
start: "top top",
end: `+=90%`,
scrub: 1
}
}); <body>
<nav>
<a href="#landing">Home</a>
<a href="#projectimg">PROJECTS</a>
<a href="#packages">PACKAGES</a>
<a href="#contact">CONTACT</a>
</nav>
<!--project -->
<div class="header" id="landing">
<div class="letters">
<div>h</div>
<div>o</div>
</div>
<div class="letters">
<div>m</div>
<div>e</div>
</div>
</div>
<div class="website-content">
<div class="img-holder">
<img src="projectheader.jpg" alt="">
</div>
</div>
<div class=“content-holder" id=“projectimg”>
<div class="row">
<h1>test</h1>
</div>
<div class="row">
<div class="img">
</div>
</div>
<div class="row">
<p>asjdhasjkdh </p>
</div>
</div>
</section>
<body>
<nav>
<a href="#landing">Home</a>
<a href="#projectimg">PROJECTS</a>
<a href="#packages">PACKAGES</a>
<a href="#contact">CONTACT</a>
</nav>
<!--project -->
<div class="header" id="landing">
<div class="letters">
<div>h</div>
<div>o</div>
</div>
<div class="letters">
<div>m</div>
<div>e</div>
</div>
</div>
<div class="website-content">
<div class="img-holder">
<img src="projectheader.jpg" alt="">
</div>
</div>
<div class=“content-holder" id=“projectimg”>
<div class="row">
<h1>test</h1>
</div>
<div class="row">
<div class="img">
</div>
</div>
<div class="row">
<p>asjdhasjkdh </p>
</div>
</div>
</section>
.content-holder is showing before .website-content, I want to be able to able to scroll from .website-content which is the main page to .content-holder which will show projects, but atm .content-holder appears prior to .website-content and scroll ends once .website-content expands.
I’ve tried to put each of them into their own sections, and changing position to relative and fixed for all