Jittery animation in firefox

[Jakob3]

Hey!

 

I've created a blob animation that get's minimized and transformed into a circle on a scrolltrigger event and on return it gets back into the previous state and resume the animation.

 

This all works well, but I've noticed that in Firefox initially animation is smooth. But after minimizing and then returning into previous state (after scrolling down and then back up) it will become very jittery, as if it were jumping frames or running at lower FPS.

 

Do you perhaps have any idea why this is happening? In Chrome it's running smoothly in all cases.

 

Here's a codepen with a barebones example:

 

I'd be most grateful for any hints

 

Best regards,

Jakob

See the Pen JjMLgPR by jakobpevec (@jakobpevec) on CodePen

[OSUblake]

Hi Jackob,

 

That sure is a lot of code to go through that isn't related to GSAP. 

 

The only thing I really noticed is that removing the scaleY animation in your minimize timeline seems to fix it, but I don't know why that would cause an issue. It doesn't look like it's anything related to GSAP, just some weird Firefox behavior. 🤷‍♂️

 

[Jakob3]

8 hours ago, OSUblake said:

Hi Jackob,

 

That sure is a lot of code to go through that isn't related to GSAP. 

 

The only thing I really noticed is that removing the scaleY animation in your minimize timeline seems to fix it, but I don't know why that would cause an issue. It doesn't look like it's anything related to GSAP, just some weird Firefox behavior. 🤷‍♂️

 

Hi Blake,

 

Thank you for taking a look. Removing scaleY does remov the jitter. Thank you, I'll try to find a workaround.