Jump to content
GreenSock

chailandau

Fluid SVG animation with filter + random duration flickering

Recommended Posts

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

Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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