Currently, I am attempting to implement a fade out animation with GSAP Scroll Trigger. The aim is for the page to first scroll across the X axis of the title before scrolling up and fading out. While I have made some progress, I am facing an issue where the title only fades to about 50%. I've experimented with adjusting the duration and scrub properties, but I must admit that I'm feeling a bit lost. Any insights or guidance on this matter would be greatly appreciated.
Below is the GSAP JavaScript and Vue/HTML code snippet:
//___________________________________________________ Title Scrolling
const titles = document.querySelector('.titles')
function getScrollAmount() {
let titlesWidth = titles.scrollWidth
return -(titlesWidth - window.innerWidth)
}
const tween = gsap.to('.titles', {
x: getScrollAmount,
duration: 3,
ease: 'none'
})
const scrollOut = gsap.fromTo(
'.titles',
{
ease: 'none',
opacity: 1
},
{
ease: 'none',
opacity: 0
}
)
ScrollTrigger.create({
trigger: '.titleWrapper',
start: 'top top',
end: () => `+=${getScrollAmount() * -1}`,
pin: true,
animation: tween,
scrub: 1,
invalidateOnRefresh: true,
markers: false
})
ScrollTrigger.create({
trigger: '.titleWrapper',
start: 'bottom bottom',
end: '140%',
scrub: 0,
animation: scrollOut,
markers: true
})
<div class="titleWrapper isolate">
<div class="titles w-fit h-screen bg-white flex flex-nowrap flex-none items-center">
<h1
class="firstTitle z-40 w-screen text-black flex justify-center font-black headerSizing tracking-tighter cursor-default select-none translate-y-[15vh]"
>
fName
</h1>
<h1
class="secondTitle text-black w-fit flex justify-center z-40 font-medium headerSizing tracking-tighter cursor-default select-none translate-y-[15vh] pl-40 pr-64"
>
sName
</h1>
</div>
</div>
Although I've dabbled in GSAP, I haven't managed to achieve the desired outcome thus far.