samd Posted February 18, 2023 Share Posted February 18, 2023 Hey so I'm trying to create an effect like this video reference: https://share.cleanshot.com/42chCZwd It has this pinned scrolltrigger type animation at the start, and then has a series of parallax feel effects throughout. When I use scroll smoother I seem to get two issues, jankyness of the previously pinned header section, and these lines throughout sections in the site. The lines I think I could probably solve by doing more css I reckon? But the jankyness I'm not sure how to fix. I've made two minimal demos on codesandbox showing my issues and how I've got so far and visualising the jankyness in the scroll smoother version With scroll smoother sandbox With scroll smoother url Without scroll smoother sandbox Without scroll smoother Let me know your best advice. p.s. -- Also this is the issue with the lines (less important) on my actual working version of the site --https://share.cleanshot.com/F0XMPWJl Link to comment Share on other sites More sharing options...
GreenSock Posted February 18, 2023 Share Posted February 18, 2023 I don't have much time to dig into this, but when you say "janky", that sounds like a browser graphics rendering thing. When I glanced at your demo, it seemed smooth overall to me, but I'm on a relatively fast machine. Have you tried setting will-change: transform in the CSS on any elements that are moving? Even on your main content element. See if that helps at all. And does it only happen on certain devices? Link to comment Share on other sites More sharing options...
samd Posted February 18, 2023 Author Share Posted February 18, 2023 Hey Jack I tried your advice of adding will-change but i'm afraid this didnt yield much luck, so you can see what I'm seeing (on a fast machine also) here is a video of the jankyness. https://share.cleanshot.com/ZcKs2hbP Link to comment Share on other sites More sharing options...
GreenSock Posted February 19, 2023 Share Posted February 19, 2023 I'm curious what you added will-change: transform to. I'd definitely try adding it to most of your stuff (if not all), at least to start. I noticed you're doing non-standard stuff with your ScrollSmoother setup: You didn't define a wrapper (so ScrollSmoother will auto-generate one) You put the content inside another element that's display: flex, so the wrapper element doesn't end up being a child of the <body>. I suspect this is putting stress on the compositor since you've got those other elements inside that container too that are transforming. You put elements OUTSIDE the content element that aren't position: fixed Other notes: Be careful about animating the "top" CSS property because that affects layout (more expensive than transforms) Why are you pinning ".header" and also setting position: fixed to its child in an onLeave? That looked odd to me, and potentially not great for performance. The ease "Power2.easeInOut" is the old syntax from many years ago. It should be "power2.inOut". It's typically better to animate the dedicated xPercent/yPercent properties, so yPercent: 100 rather than y: "100%" I wonder if you've tried not using flexbox just to see if that'd improve performance. I get the sense that your performance problem is very much tied to browser graphics rendering an potentially layout stuff. I would recommend eliminating all but one of the animations/ScrollTriggers and slowly add one at a time to see when the performance drops. Isolate the problematic piece and then attack that. Performance optimization is a very deep topic. Unfortunately we don't have the resources to provide free performance audits but if you need more help we do offer paid consulting services. 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