ScrollTrigger breaks down

[Jacob Falk]

Every now and then Scrolltrigger breaks down. The error I get is not always the same but always relates to "insertBefore". And as far as the error message says it is on line 508 in the scrollTrigger script. I don't know if I'm doing something wrong or if it's just a weakpoint that will break from time to time. 

 

you can go here to try and replicate the error: https://podimo.com/es/premium it is worst on phone but happens on desktop also. Just try scrolling up and down and it will unfortunately break at some time.

 

I can't see if I'm doing anything wrong here or I'm just doing too much 🤷‍♂️

[ZachSaucier]

Hey Jacob. It's really hard for us to debug error on a full web page like that, especially when we don't have access to the code. Please try to recreate the error in its most minimal form by stripping out components and code until you find what's causing the issue then create a minimal demo. Most likely you'll even be able to solve the issue yourself! But if not please share the minimal demo with us for us to investigate. This thread talks in more detail about how to set one up:

 

[Jacob Falk]

Oh well I was hoping it was something that someone had experienced before. The insertBefore error 🤷‍♂️

[GreenSock]

Nobody else has reported something similar and we're not aware of any issues, but I'd love to take a peek at a minimal demo to see what might be causing it in your scenario. 

1. Do you have markers: true on anything when the error occurs? (I'm trying to understand if it's ONLY happening when you have markers)
2. Are you doing any DOM manipulation with the ScrollTrigger-related elements? Is there a chance that you [accidentally?] removed something that's supposed to be pinned?

[Jacob Falk]

there are no markers. As it also happens in production code. It is not even an error that happens all the time. But every now and then it will break down.

 

the site is generated in Vue, so you might say that DOM manipulation happens. However, not from the point where it works to the point where it breaks down, if that makes any sense 🤔 I mean, it works when scrolling, and then it breaks down at some point and you might even have reached the bottom of the page and have scrolled both all the way up and down.

 

I just read about the refreshPriority. Could it be because that I may have defined the scrolltriggers in the wrong order?

 

also I'm running two timelines at once where one is in charge of pinning and the other is in charge of the actual animations. I do this because I need the animations to start at "top 90%" and the pinning to happen at "top top".

 

const tl2 = new gsap.timeline( {
  scrollTrigger: {
    trigger: this.$refs.membership,
    start: 'top',
    end: '+=1800',
    scrub: true,
    pin: true
  }
} );

tl2.set( this.$refs.membership, { opacity: 1 } );

const tl = new gsap.timeline( {
  scrollTrigger: {
    trigger: this.$refs.membershipTimelineTrigger,
    start: 'top 90%',
    end: '+=2400',
    scrub: true,
    duration: 1
  }
} );

These two timelines start at the same time btw. the second trigger is the first-child of the first trigger. So this feels like a hack, but I couldn't see how else to do it.

[ZachSaucier]

Quote

new gsap.timeline

Drop the new, you don't need it.

 

1 hour ago, Jacob Falk said:

I just read about the refreshPriority. Could it be because that I may have defined the scrolltriggers in the wrong order?

Given the lack of details that we have it's impossible for us to answer that question. 

 

1 hour ago, Jacob Falk said:

These two timelines start at the same time btw. the second trigger is the first-child of the first trigger. So this feels like a hack, but I couldn't see how else to do it.

I don't understand this comment. Are you saying that you .add() one timeline into the other? 

 

Again, it would make it much easier for us to help if you made a minimal demo: