ocrammi

Thanks! I'll check that out.

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. Thanks, I'll check out that pen

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

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.