Random Floating Blobs Optimization

[ocrammi]

Hello everyone,

 

I am new to Greensock and I wanted to create a nice animated background for my website where there are floating blobs randomly generated and floating in random directions. I have attached the CodePen URL for what I have so far. It does mostly what I want but when I visit the page on my phone the blobs seem to lag a lot.

 

I have a for loop that generates the blobs and their animation. I was wondering if there are better ways to randomize the blobs and the floating directions. The code is on the CodePen but here is a snippet of the generation:

for (let count = 1; count <= 11; count++) {
  let x = Math.floor(Math.random() * VW),
    y = Math.floor(Math.random() * VH),
    size = Math.floor(Math.random() * 10) * 10 + 50;

  var circle = document.createElementNS(svgns, "circle");
  circle.setAttributeNS(null, "class", "blob");
  circle.setAttributeNS(null, "id", `blob-${count}`);
  circle.setAttributeNS(null, "cx", x);
  circle.setAttributeNS(null, "cy", y);
  circle.setAttributeNS(null, "r", size);
  container.appendChild(circle);

  gsap.to(`#blob-${count}`, {
    x: `random(${0 - x}, ${VW - x})`,
    y: `random(${0 - y}, ${VH - y})`,
    duration: `random(5, 50)`,
    repeat: -1,
    repeatRefresh: true
  });
}

I was wondering if there are Greensock experts that can help optimize my code. I am not sure how Greensock does the calculations under the hood. It could also be a hardware issue with my phone I own an iPhone 12. 

 

Also, sometimes one of the blobs seems to randomly disappear and reset in another location. Not sure why that is happening. 

 

Additionally, the current animation moves the blobs from a random position to another random position. It would be nice if the blobs move in one random direction and only changed direction when it hits the edge of the screen so the blobs don't stop in the middle of the screen. 

 

First time posting on here, feel free to critique any part of my code or this post. 

 

See the Pen abQVVML by marco-wong-1 (@marco-wong-1) on CodePen

[Cassie]

Hi there, that blobby filter is fun, but unfortunately SVG filters are notoriously bad for performance.

It's not your GSAP code, it's a browser rendering thing. You've hit the bottleneck and I'm afraid there isn't really anything that can help aside from 'don't do that' 😕

If I were you I'd look at doing this in canvas? It'll be a bit more complex though I'm afraid.

Sorry to be the bearer of bad news

[ocrammi]

Ah, that makes sense. Thanks for the answer. I think I'll just disable the blobs for mobile devices if that's the case. 

[Cassie]

I would personally avoid this in production entirely. It's very bad for performance. It's fun for messing about with but be very cautious about the impact!

 

Quote

Additionally, the current animation moves the blobs from a random position to another random position. It would be nice if the blobs move in one random direction and only changed direction when it hits the edge of the screen so the blobs don't stop in the middle of the screen. 

This pen may help with randomness within constraints!

See the Pen qNPBpJ?editors=0010 by osublake (@osublake) on CodePen

[ocrammi]

Hmmm okay. I'm doing this for my personal website and there won't be any other javascript outside of the animation so I think (hope) it's ok. I thought it would be cool to show something slightly more technical instead of just posting my resume on a webpage. 

 

Quote

This pen may help with randomness within constraints!

Thanks, I'll check out that pen

[Rodrigo]

Hi,

 

Check this guy's youtube channel, he has a bunch of canvas related stuff and he explains things very well IMHO:

https://www.youtube.com/@Frankslaboratory/videos

 

Happy Tweening!

[ocrammi]

Thanks! I'll check that out.