wpsoul Posted January 16, 2021 Share Posted January 16, 2021 I can't understand one strange issue. I use very simple scrub scrolling like let animation = gsap.timeline(); animation.from($anobj, {y: 100}); var scrollargs = {}; scrollargs.start = "top 92%"; scrollargs.scrub = 1; scrollargs.animation = animation; ScrollTrigger.create(scrollargs); But it's jumping when I first scroll, looks like perfomance issue. I read about common issues, my issue is not when initial loading, it's while scrolling. In the same time, if I remove scrub, it's working smoothly Example can be found here https://refashion.wpsoul.net/ Scroll slowly to second screen (BROWSE COLLECTION). Parallax images jumping a bit even on slow scroll (sometimes just a bit, sometimes on 15-20px). If I scroll up, down for some times, it becomes to work smoothly. What can be reason? Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 16, 2021 Share Posted January 16, 2021 Hey wpsoul. Can you please create a minimal demo of the issue for us to look at using something like CodePen? Link to comment Share on other sites More sharing options...
wpsoul Posted January 16, 2021 Author Share Posted January 16, 2021 I created minimal demo but can't see too much jumping, just a bit See the Pen zYKyaJj by igor-sunz (@igor-sunz) on CodePen So, for me, it looks like perfomance issue, because difference in code between my page and minimal demo is only in number of items and DOM elements on page. Does scrub option perfomance is related on number of Scrolltrigger items on page? Where can i start to debug code to find issue? I tried to change end value, start value and other and still no success Link to comment Share on other sites More sharing options...
wpsoul Posted January 16, 2021 Author Share Posted January 16, 2021 I think I made more located bug. Looks like scrub has perfomance drop when I have on the same screen non scrubbed animations with Scroll trigger. When I have on the same screen only scrubed animations - it's working smoothly. Especially, huge perfomance drop when batch or stagger animations are triggered in the same time Compare https://lookmetrix.com/test-scrubs and https://lookmetrix.com/test-scrub/ Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 16, 2021 Share Posted January 16, 2021 Try setting immediateRender: true on the .from() tween. Or try using gsap.set() then animation.to() the normal values. Link to comment Share on other sites More sharing options...
wpsoul Posted January 16, 2021 Author Share Posted January 16, 2021 2 hours ago, ZachSaucier said: Try setting immediateRender: true on the .from() tween. Or try using gsap.set() then animation.to() the normal values. tried immediateRender - doesn't help. What do you mean about gsap.set? Do i need to set zero values for gsap.set? Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 18, 2021 Share Posted January 18, 2021 On 1/16/2021 at 3:52 PM, wpsoul said: What do you mean about gsap.set? Something like this: See the Pen WNGPMvV?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
wpsoul Posted January 18, 2021 Author Share Posted January 18, 2021 Didn't help. Ok. I will create minimal demo to replicate totally the same situation. Need some time for this 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