Jump to content
GreenSock

heim_designs

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

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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)?

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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);

 

  • Like 2
Link to comment
Share on other sites

  • 3 months later...

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.
×