I'm fetching data from the database but if I scroll too quickly as shown in the video the markers are stuck at the top of the page. I've wrapped it all in DOMContentLoaded, as well as went through the common mistakes and changed "top" to "0" but nothings working still. I don't think I can attach a full codepen for the issue but have attached one of my scrolltrigger calls.
Delay and stagger are arguments wrapped in the outer function which I've ruled out. Video is attached below.
EDIT* I've also added a loading screen and deactivated mousewheel event temporarily on page load as well as overflow hidden in a delay hoping that would fix it but still nothing
const digitalBlock = document.getElementById(block)
let digitalH = digitalBlock.querySelector(childElement)
digitalText = digitalH.textContent
const digitalSplit = Array.from(digitalText)
let newText = []
digitalSplit.forEach(letter => {
newText.push(`<span>${letter}</span>`)
})
const joinedString = newText.join('')
digitalH.innerHTML = joinedString
gsap.from(digitalH.children, {
scrollTrigger: {
trigger: digitalBlock,
start: '0% 70%',
end: '50% 10%',
toggleActions: 'play reverse play reverse',
markers: true
},
y: 200,
opacity: 0,
stagger: stagger,
delay: delay,
})
https://liampugh.co.uk/ShareX/brave_na9egQn9A7.mp4