VoinG

mvaneijgen, Thank you very much for trying to help me! Of course you're right, it's a case - as always - for a minimal demo I just searched much better and found the wrong approach of mine. It doesn't make sense now to go into it (for other users) in this thread, because it's quite an individual case. If I can't deal with it, I'll open a new thread. PS. One remark: your tip makes a lot of sense. From now on, this is a must for me for "Bootstrap+GSAP" projects. html { scroll-behavior: auto !important; } In any case thank you!

Hello! I have a strange behavior in mobile scrolling. On desktop the website is ideal for me. The problem occurs on Android devices. I have tested this with Google Pixel 6 and on one noname Android tablet. Both devices don't have any performance problem with another websites or something else. From time to time, the page hangs and I can't scroll at all. Then I noticed that I can't scroll with one finger, but I can with two! Another thing I've noticed is that I can't refresh the page by dragging it down. Maybe someone is familiar with this misbehavior? Sometimes scrolling is possible, but then the animations no longer work. They start to run and then they break at one or another point. There is just empty space where they should have appeared otherwise. I have removed all errors shown by W3 Validator in the html. I have tried to exclude various scripts or parts of my code to find the error. At the end i have removed all my other scripts, I have removed jQuery. Only GSAP scripts remained (and bootstrap). The problem is also, I can only test this badly - if I simulate the page as mobile in Chrome Developer Tools, there is no misbehavior and no error messages. You can view the pages here: /// I have now removed the links /// Perhaps someone will recognize the problem immediately, because it has already been seen? I can of course proceed as usual, with a minimal demo, but as mentioned it is complicated to test - i can't reproduce the problem on the desktop in the Chrome Developer Tools, only mobile devices. Thank you very much in advance!

@GreenSock Thank you very much! This is very nice code! img.addEventListener("load",()) is sure the correct event and not $(window).scroll(function (){}). The use of timeout definitely makes sense! It works very well for my purposes (without or with WP).

@4mander I hope that could help

Hello, i can't let it go) I often see problems with ScrollTrigger and img loading="lazy", i have some problems too ) loading="lazy" is a nice thing, WordPress has it active by default. I don't want to do without it voluntarily. The recommended solution is to use ScrollTrigger.refresh() I have to admit, I don't quite understand how or when exactly to use it. I think, whenever browser loads the new "lazy" image? I wrote a little script, is that correct from your point of view? https://codepen.io/design4u-koeln/pen/LYgewVp This seems to work fine even with multiple images getting in the viewport at the same time. But in my "yellow example" which some have already seen, it works (also in Firefox!!!) but rattles and jumps, especially when more images get into viewport at the same time.. https://cdpn.io/pen/debug/gOBvaga?authentication_hash=LQMExZYbPemk (please open it) What am I doing wrong? What can I do better? Thank you very much!

"When the window is resized or the page is reloaded" - this reminds me a lot of my problem

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!

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!

moved in a new thread

Hello @Rodrigo and thank you very much for a such quick response! Of course I have that in my code, but I thought codepen only accepts everything between <body></body> Of course that makes sense... Basically, I've tested this with some smartphones (Android but also iOS) and i only have the problem with the browser hanging. With my pen as well as with your fork ? I did and attached a screencast - before that i cleared cache, cookies etc. but this happens pretty quickly. Sometimes I get further on the page, but then the browser just hangs after 2 seconds and not after 1. That has never happened to me, only on this one page. Do you have any other idea how to fix this? Thank you! 01.cache.mp4

Hello! I have searched extensively and for a very long time, but unfortunately have not found a similar problem or solution. Unfortunately I cannot present a "normal" minimal demo, but I have created two codepens to illustrate the problem. I apply smoothscrolling between two div's: wrapper and web. #wrapper, #web{ width: 100% !important; overflow: hidden; } This is the js-code ScrollSmoother.create({ wrapper: '#wrapper', content: '#web', smooth: 1.5, effects: true }); In HTML I sometimes use data-speed="0.7" If you would please access this pen https://codepen.io/design4u-koeln/pen/wvYrGxd full: https://codepen.io/design4u-koeln/full/wvYrGxd with a mobile device (android / chrome in my case) and scroll up and down a bit, the browser hangs! If I forbid smoothscrolling for mobile, this does not happen. https://codepen.io/design4u-koeln/pen/xxyXOaO full: https://codepen.io/design4u-koeln/full/wvYrGxd let mm = gsap.matchMedia(); mm.add("(min-width: 576px)", () => { ScrollSmoother.create({ wrapper: '#wrapper', content: '#web', smooth: 1.5, effects: true }); }) Maybe someone recognises the " known pattern", why this is happening? Thank you very much!