Blending svg stop colors

[gareth]

I am trying to blend a linear gradient fill of a svg so it cycles through a few colors. The gradient looks how I want, but the tween feels very choppy. I know this is because of the way I have used stagger, but not sure what approach to take to make is color change smoother, but still have the gradient change from left to right?

 

 

See the Pen wvJWYXd by garethj (@garethj) on CodePen

[Cassie]

I'd probably just increase the speed and use a smoother inOut ease?

0.6 seconds is quite a quick transition - 2seconds is a lot smoother

See the Pen a73da985be73be622879c9e3131f2e1a by cassie-codes (@cassie-codes) on CodePen