Jump to content
Search Community

Scrolltrigger error on init when first item is pinned

nolafs test
Moderator Tag

Recommended Posts

Hi,

 

I experience a very strange error. It does not happen every time I do load the page. Sometimes it just recovers or no error at all. I can create the error relative consistently if use history button to go back to page. 

 

polyfills.js:1 Uncaught TypeError: trigger.revert is not a function
    at _revertAll (ScrollTrigger.js:423:1)
    at _refreshAll (ScrollTrigger.js:468:1)
    at v.invokeTask (polyfills.js:1:7158)
    at M.runTask (polyfills.js:1:2553)
    at m.invokeTask [as invoke] (polyfills.js:1:8209)
    at Z (polyfills.js:1:20772)
    at N (polyfills.js:1:21167)
    at B (polyfills.js:1:21331)
    at _swapPinIn (ScrollTrigger.js:624:1)
    at ScrollTrigger.init (ScrollTrigger.js:1121:1)

 

Also not consistent, some user experience they cannot actually scroll page. The scroll bar works but page is not actually scrolling.

 

Any idea why?

Link to comment
Share on other sites

Judging by that error, it kinda seems like maybe you've got mis-matched versions of GSAP and ScrollTrigger(?) Please make sure you're using the latest version of the core GSAP file AND ScrollTrigger. 

 

Actually, that stack trace looks like you've got some kind of intermediary 3rd party thing that's interfering. I have no idea what polyfills.js is doing there, but it certainly isn't a GSAP product and it looks to me like it's causing problems. A minimal demo will definitely go a long way toward getting you an answer. 

Link to comment
Share on other sites

The page contains a small Angular application but Scrolltrigger is not imported into the app. I was wondering about the same. The angular application does not import ScrollTrigger at all. Here is page with pin activated

 

https://637f4caaccf1f50008f1f54c--determined-keller-77949e.netlify.app/careers/

 

On the live site, I removed the pin. Overall the performance seems to better without it anyway. The angular application is small block at the bottom for the job listings.

 

https://www.firesprite.com/careers/

 

Cheers

Olaf

 

Link to comment
Share on other sites

Yeah, sorry but it's not feasible to troubleshoot a live site like that. There are way too many factors and it's impossible to really tinker and dig. If you'd like some help, you'll definitely increase your chances of getting an answer if you provide a simplified minimal demo (like in CodePen or StackBlitz or CodeSandbox). 

 

I checked at that link and it looks like my suspicion was correct - you've got TWO different versions of GSAP loaded (both old, but one is much older than the other): 3.5.1 and 3.10.4

 

I would strongly recommend updating to 3.11.3 across the board. 

Link to comment
Share on other sites

Thanks for looking into it. I understand but putting this in CodePen will not actually throw the error. Is most likely something else is buggering up the site pin init. Regarding the version, it is very strange, I use npm to load GSAP. The site is generated on netlify and should always load the latest version. I have no idea where that old version is loaded from. I have a look. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...