VoinG Posted May 2, 2023 Share Posted May 2, 2023 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/xxyXOaOIt'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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted May 2, 2023 Solution Share Posted May 2, 2023 I noticed two issues: You've got invalid markup - an extra quote: <span class="input-group-text""> 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. Link to comment Share on other sites More sharing options...
VoinG Posted May 3, 2023 Author Share Posted May 3, 2023 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! Link to comment Share on other sites More sharing options...
GreenSock Posted May 3, 2023 Share Posted May 3, 2023 6 hours ago, VoinG said: addEventListener("DOMContentLoaded", () => {ScrollTrigger.refresh();}); Yeah, that's completely unnecessary because... ScrollTrigger already does that automatically (on both "DOMContentLoaded" and "load" events) That event fires BEFORE things are done loading (like images). Glad you got it working now. 👍 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now