Jump to content
GreenSock

wpsoul

Scrub scroll jump sometimes

Recommended Posts

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×