Issue with scrollTriggers loading late

[Shutt90]

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

Edited February 9, 2022 by Shutt90
Added things to rule out

[akapowl]

Hello there @Shutt90

 

Unfortunately in 99% of cases it is close to impossible to help with ScrollTrigger related issues just from a look at a code-snippet or video.

 

For one, scroll-based animations are heavily dependent on a fitting HTML markup and CSS styling, and furthermore as you mentioned yourself, there is a whole lot more going on on your page than just what is to be seen in the code you posted. There are just too many possible factors for reasons that might be causing your issue (like when and how you load your JS files, when and how you fetch the data, wether something like e.g. images being loaded in late causes a change to your layout etc. ) so a minimal demo will siginficantly increase your chances of getting a solid answer. Most of the times breaking things down to the bare minimum for re-creating your issue even helps find the culprit yourself.

 

 

This pen here fetches data from a placeholder API (which you might also use for aa demo of your own if you can't or don't want to include your data) and then inserts it into the DOM, and it appears to be working quite alright.

 

See the Pen dyZveRy by akapowl (@akapowl) on CodePen

 

 

 

It might also be worth noting, that there is a regression with .from() tweens in GSAP 3.9.1, so you might have to add a lazy: false to your tween to make it work correctly if you are using that current version.

 

 

[Shutt90]

Hi Akapowl,

 

After racking my brain for a few days I've just stuck it all in a setTimeout before triggering any of the functions and giving it 100ms because calling them in and it seems to be working fin. Not sure if the issue was with my DOMContentReady having an issue with my string split and stagger but anyways the issue is solved. Thank you for your help, I'll certainly look into lazy: false in furture too

[StratoDEV89]

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