Fluid SVG animation with filter + random duration flickering

[chailandau 4 Likes (Newbie)]

Hi, I'm trying to get a lava lamp like effect on these SVG elements using random durations. It works, but it keeps flickering. Is there any way to get rid of that?

See the Pen eYVdVLz by chailandau (@chailandau) on CodePen

[OSUblake 18,477 Likes (Superhero)]

Hi chailandau,

 

First off, you're random duration thing here does nothing, nor is it even scoped correctly due to the arrow function. But we can worry about how to due random durations later.

 

onRepeat: () => {
          this.duration(randomDuration);
        }

 

As for the flickering, it might be a browser rendering issue. Try isolating what the problem might be. My first guess would be those filters.

 

[chailandau 4 Likes (Newbie)]

Oh shoot, lol, didn't even realize it wasn't working with the randomDuration. I think it was the filters, I ended up going a CSS route and then using ScrollTrigger to toggle the class. Thanks!

[OSUblake 18,477 Likes (Superhero)]

Just for future reference if you ever want to randomize durations you can create your animations inside a function that gets called again when it's done.

 

See the Pen bGLwjLp by GreenSock (@GreenSock) on CodePen