[Issue with scrollTriggers loading late]

On 2/9/2022 at 6:25 AM, Shutt90 said:

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

Hello, I had the same problem and I solved it by doing a lazy creation of the instance, that is, in a function I delegate the creation of the instance and as soon as the data arrives from the fetch, I call the function, I use angular and the data arrives in observables so I can run code on the subscribers to do this, additionally as a security measure, after creating the Scrolltriggers it runs a refresh within a setTimeout of 500 or 1000, and this manages any failure that may remain when loading the data in the DOM