ScrollTrigger animation jumps and glitches on scrolling back and scrolling in second time

[heim_designs]

Hello everyone. 
I am trying to make smooth background animation where I have an array of shapes that morph between each other and change colors on scroll.
But I am struggling to make this animation smooth. On first scroll it works okay but when I am scrolling back it becomes crazy. And on first fast scroll it works pretty bad as well. Seems like I am missing something. Overall I want to make it seamless and very smooth.
Another question: how can I make shapes change color simultaneously with the body color change? I tried to do that but there is a conflict between different animations. Color change from first animation overrides color change from animation related to the body. 

See the Pen XWzeRbE by dmytro-karaulov (@dmytro-karaulov) on CodePen

[OSUblake]

Hi heim_designs,

 

I would suggest working on the animation without ScrollTrigger, so remove all the ScrollTrigger code until it looks the way you want. If it plays nicely without ScrollTrigger, then it should have no issues once you hook it up to ScrollTrigger. I would also suggest using using a single timeline for all those animations. There really is no need to have a separate timelines for animations that are going to play sequentially.

[GreenSock]

I agree with everything Blake said. Also, beware that filters are notoriously VERY hard on the browser performance-wise. That's totally unrelated to GSAP. If your animations stutter, it's almost surely a graphics rendering issue. SVG can also be tough on the browser to render, so you've got quite a few things in your setup there that's pushing the browser very hard. 

 

In most cases I've seen, GSAP accounts for less than 2% of the load - the rest is graphics rendering. So I'd recommend focusing your energy on making edits to your setup that'd ease the graphics rendering CPU load (like eliminate filters, reduce the area of change, maybe switch to canvas/WebGL instead of SVG, etc.) 

 

Good luck!

[heim_designs]

3 hours ago, GreenSock said:

I agree with everything Blake said. Also, beware that filters are notoriously VERY hard on the browser performance-wise. That's totally unrelated to GSAP. If your animations stutter, it's almost surely a graphics rendering issue. SVG can also be tough on the browser to render, so you've got quite a few things in your setup there that's pushing the browser very hard. 

 

In most cases I've seen, GSAP accounts for less than 2% of the load - the rest is graphics rendering. So I'd recommend focusing your energy on making edits to your setup that'd ease the graphics rendering CPU load (like eliminate filters, reduce the area of change, maybe switch to canvas/WebGL instead of SVG, etc.) 

 

Good luck!

Seems like I didn't communicate issue clearly. Im using canvas rendering so perfomance itself is good. But it seems like I made a mistake in code. It starts another animation imediately after new trigger is reached. Can I set it up somehow in a way it will play smooth like a single animation but with different triggers (on real life website each shape position refers to particular section)?

[heim_designs]

I figured out that without scrub value (just "true" option) in works perfectly without jumps. But in my case it needs to have smooth scroll animation so scrub value is needed. Is there a way to use scrub in a way animations do not conflict with each other? 

[Cassie]

Maybe preventOverlaps could help you? Alternately maybe looking into overwrite modes?

However - as Blake said, if you use one timeline you won't run into these issues. It's by far the easiest solution

If you have four sections in the DOM, make sure that your tweens are equally distributed (timing-wise) into four equal parts and then that'll map to the sections!

[heim_designs]

1 hour ago, Cassie said:

Maybe preventOverlaps could help you? Alternately maybe looking into overwrite modes?

However - as Blake said, if you use one timeline you won't run into these issues. It's by far the easiest solution

If you have four sections in the DOM, make sure that your tweens are equally distributed (timing-wise) into four equal parts and then that'll map to the sections!

Than you. I tried preventOverlaps and it made scrolling forward super smooth (except it skips one trigger for some reason 😮). But scrolling backwards is still jumping and glitching. 

See the Pen zYPEMwO by dmytro-karaulov (@dmytro-karaulov) on CodePen

Unfortunately I don't think it's possible to make it as one timeline because I have different triggers on real website. Each section of the website has it's background. Sections have different size. I am not sure how in this situation I can make it as one timeline. Here is the site, it works almost correctly without scrub smoothing (except last animation starts too early) https://snig-new.webflow.io/

[OSUblake]

Well, part of the problem is that you have the last animations linked up to the wrong timeline. Right now they are connected to scr4.

 

scr5.to(path1, {fill: "rgba(0, 14, 100, 1.0)", attr: {d: shape1[5]}}, 0);
scr5.to(path2, {fill: "rgba(0, 91, 200, 1.0)", attr: {d: shape2[5]}}, 0);
scr5.to(path3, {fill: "rgba(0, 82, 157, 0.5)", attr: {d: shape3[5]}}, 0);
scr5.to(path4, {attr: {d: shape4[5]}}, "<");
scr5.to(path5, {fill: "rgba(130, 202, 255, 0.6)", attr: {d: shape5[5]}}, 0);
scr5.to(path6, {fill: "rgba(155, 64, 186, 0.4)", attr: {d: shape6[5]}}, 0);

 

[rkm]

I don't know, if you still have the issue. But have you seen this? https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config() I think it's from the latest upgrade. It saved my project :)