Cannot read properties of undefined

[Jay George P]

I'm getting an error when loading a page when you don't start at the "top" of the page, e.g. if you scroll down near the bottom of the page, and then refresh, you get an error, but if you start fresh from the top it works fine.

NB you might need to refresh a couple of times to reproduce this, it happens about 50% of the time.

 

If I open the console when the animations don't load I get `Uncaught TypeError: Cannot read properties of undefined (reading 'end')`, pointing at this code:

 

 

```

function setupSplits() {
    gsap.utils.toArray('[data-gsap="split-text"]').forEach(el => {
        gsap.from(SplitText.create(el, {type: "words,chars"}).chars, {
            duration: 0.8,
            opacity: 0,
            y: 10,
            ease: "circ",
            stagger: 0.02,
            scrollTrigger: {
                trigger: el,
                start: 'top 80%',
                end: "top 0%",
                once: true,
            }
        });
    });
};

setupSplits();

```

 

Is there something basic I'm doing wrong here?

Edited February 25, 2022 by Jay George P
Remove staging site since so search engines don't crawl this

[OSUblake]

Hi Jay, 

 

Your code looks fine, but it's really hard to troubleshoot a live site. Is there any way you can try to make a minimal demo that reproduces the issue? You can use something like CodeSandbox, which will more accurately replicate a real environment. 

 

Outside of that, the only thing I can think of is a known regression in 3.9.1 with from tweens, so try adding lazy: false to your animations.

 

[GreenSock]

It is super difficult to troubleshoot blind, but I'd recommend removing the once: true and see if that resolves things. It won't really behave any differently because the default toggleActions are "play none none none". But please let us know if that resolves things for you because I have a theory about what might be causing the issue in your scenario.

[Jay George P]

Fantastic, removing `once: true` fixed things.

 

You can explain your theory now

 

PS FWIW rolling back to 3.8.0 did not change anything.

[GreenSock]

6 hours ago, Jay George P said:

Fantastic, removing `once: true` fixed things.

 

You can explain your theory now

It'd probably be too complicated to explain fully here, but the important thing is that it's fixed in the upcoming release and it was an EXTREMELY rare scenario that'd trigger that issue (nobody else has reported experiencing it).  

[orrbitt]

On 2/25/2022 at 11:43 AM, GreenSock said:

It'd probably be too complicated to explain fully here, but the important thing is that it's fixed in the upcoming release and it was an EXTREMELY rare scenario that'd trigger that issue (nobody else has reported experiencing it).  

 

I'm actually experiencing the same thing... it happens only if you're scrolled down the page and refresh, although we aren't using `once: true`. I'm using 3.10.4 which I believe is the latest release. Is there anything else you can recommend?

[GreenSock]

3 hours ago, orrbitt said:

I'm actually experiencing the same thing... it happens only if you're scrolled down the page and refresh, although we aren't using `once: true`. I'm using 3.10.4 which I believe is the latest release. Is there anything else you can recommend?

Hi, @orrbitt. Got a minimal demo? It's virtually impossible to troubleshoot without one.