Elodie

OK, thanks ! Good news (hoping that on your computer neither of the two appears lagging ^ ^) For my part, I have a shaky rendering on chrome when I scroll (it's much cleaner on Firefox). I put that aside but I should definitely give up locomotive scroll and parallax effects. Thanks again !

Thank you for your answer, I tried to disable the animations and locomotive scroll, but it does not help me much. What I don't understand is that the problem appeared overnight on Chrome (since September everything was working fine as on Firefox). So it looks like a browser update to me? Maybe someone has encountered the same problem ? I try to understand (before deleting locomotive scroll and all my work on the animations which I had tested and worked well until now, no performance issues before February).

Hello, Since last month my website scrolling appears to be lagging on Chrome, desktop version (slow and blurry compared to Firefox) : https://kuroweb.fr/ I use Gsap scroll trigger with locomotive scroll. I guess my code isn't the best optimized but so far it's been working fine : https://kuroweb.fr/wp-content/themes/kuroweb/js/gsap.js Could someone help me understand why? Thanks !

Thank you so much Jack and Zach ! I really appreciate this community, you gave me good leads by taking the time to explain. So I met my new friend Locomotive Scroll and now I have a pretty smooth scroll I adapt the parallax and put a pin with Gsap on each layer (no more position fixed in the css but absolute) //PARALLAX const parallax = document.querySelectorAll(".parallax"); parallax.forEach((elem) => { const depth = elem.dataset.depth; gsap.to(elem, { scrollTrigger: { trigger: elem, scrub: true, pin: true, pinSpacing: false, start: "top top", scroller: ".smooth-scroll" }, yPercent: -100 * depth, ease: "none" }); }); The result of the parallax if it can help someone : https://xoiuv.csb.app/ This is my code I hope it's ok now with the GSAP3 syntax (I add images and animations to test perf + scrub/play/pin sections) : https://codesandbox.io/s/strange-noether-xoiuv?file=/script.js > A 1px line sometimes appears between the sections (bottom of the parallax and the wave between the 2 pin sections), I fix it in the CSS with a position "top: -1px" > No more issues with my SVG / CSS animations, I don't realize if it's an aberration to make animation in CSS with GSAP, but it works pretty well and it's just simple ( I don't have the impression that it plays a big role in performance). But if it makes a real difference, I will create them in Gsap, what do you think about ? Again thank you for giving the keyword "smooth scrolling" ^ ^ it helps a lot in my research > Demo Locomotive Scroll + Gsap : https://codepen.io/GreenSock/pen/ExPdqKy > Newbie Tuto :

Hello, thanks for your answer and the link very useful. So I make some tests and I create a minimal code, finally I don't think it's a pin/ svg issue. I declared a simple infinite animation on a title H1 and the parallax timeline. I still have this page break bug on Chrome (when I refresh or leave the page, it randomly reappears, jumping content). It does not appear at all in two cases: if I remove the animation OR if I remove the background image in the css file (?? the image is 250 ko not so big). I don't understand this bug (a problem with loading, GPU?). To test (leave the page and come back) : https://pwlfu.csb.app/ Code : https://codesandbox.io/s/epic-glade-pwlfu?file=/script.js > I use the parallax demo and make it more responsive > I don't really understand this part "why we can't just use transforms for pinning" (sorry true newbie !) > I find this, is it a similar issue ? (Why does my "scrub" animation jump on initial load ) : scrub parallax jump at the start ? Thanks again for your help ^ ^ !

Hello, I have a problem with animation applied to SVG path on Chrome. It makes the sections of my page "jump", it's really visible in the two parallax (space issue with the pin sections ?) > you can see a screen of my bug here : http://ukubi.fr/test/proto/bug.png Here is my code, you can delete the animation at the beginning of the CSS file to see the difference (#plantTop path). I try also to make the animation with Gsap but I have the same bug (comment in the script.js). I see the bug only when I add an animation of a path, no problem with others animations. https://codesandbox.io/s/agitated-wing-dnoyk?file=/style.css Can you help me to understand ? Something wrong with my code ? Thanks !