Any way I can achieve this blob effect using custom JavaScript?

Design help Custom code
1

Good day everyone.
I’ve seen quite a bit of websites recently that have a sort of “blob” elements effect in the header of their site. Is there any way I can achieve this in Webflow with some custom code / JavaScript?

Here are some examples:

Any help is appreciated, thanks!

2

Those are done with Three.js library and the HTML canvas tag.

However to put your own custom animation together like that requires too much advanced knowledge to put in a forum. You might want to check out the Three.js documentation.

Check their example code out:

3

Thanks for your help @samliew!
I figured it would be quite advanced. So instead I found one that seems a little bit less complex, from the site below:
http://elje-group.com/

It’s a sort of lava-lamp animation, and I believe they’re using something called lamp.animation.js - am I right in this? And if so, where can I find this JS to implement, and how can I implement it?

Thanks again!

4

Found it. It’s not a library in this case, but someone custom-coded it and showcased it here:

The canvas element will have to go into Embed Component (Webflow doesn’t have a canvas component).

The CSS will go between <style> </style> tags, and placed in Page Header Code.

The JS will go between <script> </script> tags, and placed in Page Footer Code.

If the CSS or JS is too long, you’ll have to host this file off-site (like Github Gists).

How to host and embed files on Github tutorials can be found on my profile.

5

Thanks a ton @samliew!

Just three more questions on implementation;

  1. How can I change the colour of the circles?

  2. For the background, I see that to change the colour I need to alter the CSS code, but how do I add a degree to the gradient?

  3. If I want this on a 100vh Hero Section of my site with content above it, do I just place an Embed Component and set it to 100vh, then add content over it?

Cheers!

6

Try changing "#3494E6","#EC6EAD" in the code.

You can omit this CSS actually and just use Webflow to style the embed component with the gradient builder.

If you need further help please try it first so I can see what’s going on.

7

@samliew
Alright, I’ve tried it, and it works. However, it’s very small for some reason.
Have a look here:
netweave.webflow.io

I want it to fill up the entire screen like a Hero Section would, with a height of 100vh and a width of 100%. I then want to add my logo, some text, and other elements in front of it, as if it’s the background (like the site I found this effect from).

Here’s my read-only link:
https://preview.webflow.com/preview/netweave?preview=506a784a645f8bedd101261afb0f2b6b

Thanks for all your help!

8

Set your section to position:relative

Give your embed component a class and set position:absolute, top/left/right/bottom value of 0 (click Square icon)

Add a new div block to the page, give it classname of lamp-anim, set width:100%, height:100%. Delete it after or move to another page.

In your canvas element in custom code component, delete width="100%" height="100vh"

9

Works perfectly, thank you!
I’d just like to know these; is it possible to change the speed of the circles, and add more circles? If so, how?

10

Anything is possible with JavaScript. I am running a consultation line for custom code changes if you need help in future.

1 Like
11

Alright, thanks again for all your help, I appreciate it.

Cheers!

12

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.