scrolltrigger Scrolltrigger issue in Firefox

[VoinG]

Hello,
I have a problem with this code snippet, but only in Firefox. Chrome and IE work fine.
I've already mentioned the problem in another thread, but I think that's a different topic and area, so i'll start this new thread. Unfortunately I cannot present a "normal" minimal demo, but i've created a codepen to illustrate the problem: https://codepen.io/design4u-koeln/full/xxyXOaO

It's about the two areas with those gray bootstrap cards.

 

CSS:

.karteien,
.karteien2 {
  height: 100vh;
  width: 400vw;
  display: flex;
  will-change: transform;
}

.karteien .gsapkarteiwrapper,
.karteien2 .gsapkarteiwrapper {
  padding: 100px 0;
  height: 100%;
  width: 100vw;
  will-change: transform;
}

JS:

    const t1 = gsap.timeline();
    t1.fromTo('.karteien .second', {x: '-100%', y: '+100%'}, {y: 0})
    t1.fromTo('.karteien .third', {x: '-100%'}, {x: '-200%'})
    t1.fromTo('.karteien .fourth', {x: '-400%'}, {x: '-300%'})

    const t2 = gsap.timeline();
    t2.fromTo('.karteien2 .second', {x: '-100%', y: '+100%'}, {y: 0})
    t2.fromTo('.karteien2 .third', {x: '-100%'}, {x: '-200%'})
    t2.fromTo('.karteien2 .fourth', {x: '-400%'}, {x: '-300%'})
    

    ScrollTrigger.create({
        animation: t1,
        trigger: '.karteien',
        start: 'top',
        end: 'bottom',
        scrub: true,
        pin: true,
        onToggle: self => console.log("toggled, isActive:", self.isActive)
    });

    ScrollTrigger.create({
        animation: t2,
        trigger: '.karteien2',
        start: 'top',
        end: 'bottom',
        scrub: true,
        pin: true,
        onToggle: self => console.log("toggled, isActive:", self.isActive)      
    });

 

I added this here to illustrate.

onToggle: self => console.log("toggled, isActive:", self.isActive)     

 

If you take a look at the pen with Chrome and Firefox, you'll see that Firefox is too late to start interacting with the element.

If you click "F12", change viewport height or load the page for the second time, everything works perfectly in FF as well ))
Sometimes the black footer moves up, sometimes not
No matter what I do - unbind jquery, deploy window.load, or jquery document.ready, or even window.resizeTo("99.99%","99.99%"); 🤦‍♂️- it doesn't want to work properly in FF. 
Does anyone have an idea what could be causing this? Thanks!

See the Pen xxyXOaO by design4u-koeln (@design4u-koeln) on CodePen

[GreenSock]

I noticed two issues: 

1. You've got invalid markup - an extra quote: 

   <span class="input-group-text"">

2. You've got  loading="lazy" attributes on your images which means they're loading AFTER the window's "load" event fires (which is when ScrollTrigger does its refresh(), calculating all the start/end positions). You need to either remove those -OR- make sure you call ScrollTrigger.refresh() after everything is done loading and your layout is settled.

[VoinG]

Oh thank you! Lazy loading was the problem. I should have figured it out myself, sorry.

 

addEventListener("DOMContentLoaded", () => {ScrollTrigger.refresh();}); 

doesn't help, but if I remove loading="lazy" everything works fine!

There is a recommendation from Chrome: "Avoid lazy loading images that are in the first visible viewport", but that's exactly what I did. 🙈

https://web.dev/i18n/en/browser-level-image-lazy-loading/#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport
I'll see how it fares with lazy loading and other images on the site. But thank you very much, my problem is solved!

[GreenSock]

6 hours ago, VoinG said:

 

addEventListener("DOMContentLoaded", () => {ScrollTrigger.refresh();}); 

 

Yeah, that's completely unnecessary because...

1. ScrollTrigger already does that automatically (on both "DOMContentLoaded" and "load" events)
2. That event fires BEFORE things are done loading (like images). 

Glad you got it working now. 👍