pattocheu Posted December 27, 2023 Share Posted December 27, 2023 Hello everyone, I have a slight trembling on my images when scrolling, and I'm not sure if it's related to my local environment (CSS, etc.) or an implementation issue with ScrollTrigger. On my CodePen, I don't see the effect that I'm experiencing locally on my page. Thank you. See the Pen yLwyywa by pattocheu (@pattocheu) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted December 27, 2023 Solution Share Posted December 27, 2023 Hi, Indeed if the problem can't be replicated in codepen, then most likely is something else in your local setup. A few pointers: Be sure to optimize your images as much as possible so it's easier on the browser to render them. Avoid long and slow animations, those normally are harder on the browser as well. Since you're tweening the Y property (transform) try using will-change: transform on the elements you are animating: .parallax img { /*...*/ will-change: transform; } Performance is a deep topic and a 99% of the times it boils down to browser rendering rather than a GSAP issue. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted December 27, 2023 Share Posted December 27, 2023 If all of that fails, you could also check to see if ScrollTrigger.normalizeScroll(true); helps. It kinda sounds like maybe it's a synchronization thing between the main thread and scrolling thread (browser thing). Link to comment Share on other sites More sharing options...
pattocheu Posted December 27, 2023 Author Share Posted December 27, 2023 Thank you for this information. In connection with this post and in order to master performance, is there any benefit to destroying timelines and clearProps once they are no longer in use and, for instance using onComplete()? For exemple with my code : animationsTitle() { this.elements.title.forEach(title => { this.splitTextToSpans(title); const tl = gsap.timeline({ delay: this.delayIn, onComplete: () => { tl.kill(); gsap.set(title.querySelectorAll('.word'), { clearProps: "all" }); }}); gsap.set(title.querySelectorAll('.word'), { yPercent: 103 }); tl.to(title.querySelectorAll('.word'), { yPercent: 0, duration: 0.9, ease: 'power4.inOut', stagger: 0.05 }); }) } Thank you. Link to comment Share on other sites More sharing options...
GreenSock Posted December 28, 2023 Share Posted December 28, 2023 1 hour ago, pattocheu said: is there any benefit to destroying timelines and clearProps once they are no longer in use Definitely not. That'd actually hurt performance slightly (not that you'd ever notice). It's just wasteful - timelines already make themselves eligible for garbage collection once they complete anyway, and leaving CSS properties on an element doesn't "cost" anything. The only reason to clear props is if those inline properties are somehow interfering with something or keeping your element from displaying the way you wanted. 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