51 comments found.
Hello! I’m looking to implement blob on my WP website – any chances that it can be connected lines instead of dots? Cheers!
Hello! Yes it’s possible. It can be done as a freelance job. Let’s discuss it via Facebook Messenger: https://www.facebook.com/activiotic
Hello I am sorry i am not a Programmer, can you help for the installation Thank you Regards Arnim
Hello! Thank you for purchase! Of course, I’ll help you. I can do it here in the comments, but it’s better to do it through Facebook Messenger: https://www.facebook.com/activiotic. You can also send a private message so I can see your email and then communicate via email.
Hi, I saw someone ask about three years ago if circles can be used instead of squares. You replied, that although possible, it “will put a huge strain on the CPU.” Is this still the case?
Hi, thanks for purchase! Yes, drawing circles still requires much more CPU resources. It’s a feature of HTML5Canvas technology used for rendering. You probably won’t notice it on powerful desktop computers. But on other computers and mobile devices it will be noticeable. If you want, I can send you modified version having circles instead of squares.
Thanks for the quick response. Can you send me this modified version? I’d like to give it a try. Thank you again!
Yes, I’ve already prepared it. Please contact me via Facebook Messenger: https://www.facebook.com/activiotic/. Or send a message via Codecanyon so that I can see your email.
I apologize for the delayed reply. I have reached out to you via Codecanyon message. Thanks!
Hi, I’ve tried to make the blob show on my wordpress website.
I have looked at all comments and made like described but nothing show on the page. It is simply blank.
Hi! Thanks for purchase! Could you please give me a link to the web page so that I can better understand what is going on.
I checked your page. The block you placed the BLOB in has zero height. That’s why you see nothing. Problem is in your layout. First of all, ensure your block/div has non-zero height and width.
Ok, haven’t been able to change the block/div height. Do you know how it can be done?
It can be done in your page builder for Wordpress. I don’t know which exactly builder do you use but I’m sure it has a lot of options to adjust your layout. You need to set size of the block you placed BLOB in. To see if size is correct you can set some background color.
If you need more help with installation, we can discuss it via Facebook Messenger: https://www.facebook.com/activiotic
I’ve send a message
Hi im trying to implement this onto wordpress, and here’s what i understand
1st step – create “blob” folder in public-html
2nd step – upload “jsband-min.js” and “blob-min.js” onto blob folder (there’s a lot of these 2 files in the downloaded file. which 1 it is?)
3rd step include the code onto Raw HTML on wordpress builder, and change its settings (how to i change the settings? do i open any example file and paste the entire thing in it?)
Please help!
<script src="../blob/jsband-min.js" type="text/javascript"></script>
<script src="../blob/blob-min.js" type="text/javascript"></script>
<div id="blob_container" style="width: 100%; height: 100%;"> </div>
<script type="text/javascript">
var blob = new BlobAnimation("blob_container", { /*settings*/ });
</script>
Open any example. Let’s take “combination-1.html”. Copy this part:
var blob = new BlobAnimation("blob_container", {
//Blob main settings
BLOB_SIZE: 220,
BLOB_DISTANCE: 1000,
DETALIZATION: 60,
PERSPECTIVE_DISTORTION: 1,
ROTATION_SPEED: 5,
OFFSET_X: 0, //offset in pixels
OFFSET_Y: 0, //offset in pixels
PERCENTAGE_OFFSET_X: 0, //offset in percentages
PERCENTAGE_OFFSET_Y: 0, //offset in percentages
//Dot settins
DOT_SIZE: 2,
DOT_COLOR: "#999999",
//Responsivity settings
AUTO_SCALE: false,
VIEWPORT_WIDTH: 1000,
VIEWPORT_HEIGHT: 1000,
//Mouse settings
MOUSE_DISTANCE_MIN: 20,
MOUSE_DISTANCE_MAX: 400,
MOUSE_SENSITIVITY: 1,
INERTIAL_TIME: 2,
//Shape settins
//Shape main settings
INITIAL_SHAPE: {
wave1: {amplitude: 10, frequency: 3, phase: 2},
wave2: {amplitude: 60, frequency: 2, phase: 2},
wave3: {amplitude: 10, frequency: 3, phase: 2}
},
USE_MORPHING: true,
USE_WAVE_MOTION: true,
USE_WAVE_SWING: false,
//Morphing settings
MORPHING_AUTOPLAY: true,
MORPHING_DURATION: 2,
MORPHING_DELAY: 2,
MORPHING_TRANSITION_TYPE: "cubic",
MORPHING_SHAPES: [
{
wave1: {amplitude: 17.582, frequency: 3.736, phase: 0},
wave2: {amplitude: 32.967, frequency: 3.846, phase: 0},
wave3: {amplitude: 128.571, frequency: 1.044, phase: 0}
},
{
wave1: {amplitude: 59.341, frequency: 4.78, phase: 0},
wave2: {amplitude: 27.473, frequency: 4.286, phase: 0},
wave3: {amplitude: 12.088, frequency: 1.319, phase: 0}
},
{
wave1: {amplitude: 106.593, frequency: 1.319, phase: 0},
wave2: {amplitude: 114.286, frequency: 0.989, phase: 0},
wave3: {amplitude: 0, frequency: 2, phase: 0}
},
{
wave1: {amplitude: 54.945, frequency: 4.286, phase: 4.246},
wave2: {amplitude: 163.736, frequency: 0, phase: 5.213},
wave3: {amplitude: 0, frequency: 0, phase: 0}
},
{
wave1: {amplitude: 93.407, frequency: 2.582, phase: 0},
wave2: {amplitude: 29.67, frequency: 0.824, phase: 0},
wave3: {amplitude: 27.473, frequency: 1.319, phase: 0}
},
{
wave1: {amplitude: 95.604, frequency: 0.769, phase: 0},
wave2: {amplitude: 200, frequency: 0.989, phase: 0},
wave3: {amplitude: 163.736, frequency: 0, phase: 0}
},
{
wave1: {amplitude: 31.868, frequency: 2.857, phase: 0},
wave2: {amplitude: 29.67, frequency: 3.571, phase: 0},
wave3: {amplitude: 35.165, frequency: 3.242, phase: 0}
},
{
wave1: {amplitude: 32.967, frequency: 6.978, phase: 0.552},
wave2: {amplitude: 18.681, frequency: 10, phase: 0},
wave3: {amplitude: 17.582, frequency: 1.319, phase: 0.725}
}
],
//Wave motion settings
WAVE_1_MOTION_SPEED: 1.7,
WAVE_2_MOTION_SPEED: 1,
WAVE_3_MOTION_SPEED: 3
});
and paste it into RawHTML instead of this:
var blob = new BlobAnimation("blob_container", { /*settings*/ });
Ok i’ve successfully implemented it on wordpress, however there are a few issues.
1. It will only appear if i set the position to static. It’ll not work if position is relative.
2. Even with static, the position seems to be off. It’ll only appear as half on bottom of the screen, even tho it’s supposed to be on the 1st row.
3. I’ve tried implementing as background and it cant seem to work. Any clue on how to do this? Im trying to achieve what the link below is http://www.arcanum.venturesI checked http://www.arcanum.ventures and I see no problems. BLOB is displayed in full, animation works. Could you please give me the link that illustrates your problem.
Also you don’t need to change positioning of “blob_container”. Adjust positioning of your RawHTML element instead.
Unfortunately it doesn’t play if I don’t set the position to static on the html code. And somehow the position is not correct as well.
Help me please D:
set position to fixed*
This page does not load at all.
Try this: set some bright background color to your RawHTML block. Make it red for example. Then check your page: do you see that red rectangle? If not then problem is in your layout.
Hi, thanks for this phantastic work. I love it. Can you let this morphing blob make sounds? I wanted to ask for a quote. How much would it be – to get the blob making sounds when touching or while moving? Thank you Best regards Justus
Hi! Thanks for purchase! Yes it’s possible. Let’s discuss it via Facebook Messenger: https://www.facebook.com/activiotic
Hi, Can i use it on webflow? As custom html element or someother way?
I was wondering if you would happen to know how could I create a backrgound with the blob, and display content on the top of it ? For exemle the blob is on the center of the page and h1 and
are displayed on the top of it ?
Best regards Ionis
Hello! Yes, BLOB can be used as a background. For that you need to create an empty DIV element and use it as background for other elements. In regular HTML layout it can be done with absolute or fixed positioning. Then configure BLOB within that DIV. If you use some page builder, then make sure the block you use for BLOB is used as a background. I don’t know how to do it in Gutemberg, but I’m sure it’s possible.
Hello, I have followed the tutorial and read most of the comment, but I still can not figure out why the blob is not working. We use Gutemberg as page builder. The page : https://iaepita.flywheelstaging.com/test-blob/
Thank you
Hello! I’m having some troubles making BLOB visible on my page, I create a folder on my public_html/wp-content/blob and I add the settings on a html row using visual composer, but the graphic is not displaying, can you let me know what I’m doing wrong. thank you!
http://www.arcanum.ventures/test-2/Hello! Answered via FB Messenger.
thank you I just answer you back
Looks great! Any chance of adding gradient colour support?
Yes, gradients can be added. I just need to make sure it doesn’t affect performance.
Dear team, i am interested to buy this for my Wordpress site, I am just worried it will slow down the website, how heavy is this?
Hi! Thanks for your interest! It’s not heavy even on those presets you can see on demo site. You can measure performance using browser tools or do it in Task Manager (Windows) or Activity Monitor (MacOS). BLOB is built using Canvas technology, so it’s very fast and lightweight.
Hi, first of all I really like Blob! I have a few questions and suggestions.
Is it possible to change the initial spin direction? for example on load it should spin up or down?
is it possible to change the form of the squares lets say to dots?
Would be awesome to have some documentation on the color changing. I copied it from one of the examples, but a dedicated section for different options of color changes would be very cool.
Thank you, Niko
Hi, Niko! Thanks for purchase! For now there is no setting responsible for initial spin direction. I’ll add it in the next update. Thanks for noticing this point. As a quick solution, I can modify source code to change this direction and send it to you via Facebook Massenger (https://www.facebook.com/activiotic/) or email.
It’s possible to change dot shape. I did not make a special setting, because square shape is the best option in terms of performance. For example, round dots will require about 10 times more computing power. But, as with “spin direction”, I can make a small change in the source code and send it to you.
I’ll include some “color changes” guide into documentation. Thanks for this idea. This is not a standard BLOB feature at the moment. Example you mentioned just demonstrates that it’s possible to animate color property using 3rd party tool of your choice (like GSAP). I used my own “jsBand” library included in BLOB package. As always, I am open to help with this and other questions via messenger (https://www.facebook.com/activiotic/).
Hi! I bought the blob pack today and tried to install it on my Wordpress Elementor site. I added the two JS files on my hosting platform and I pasted the BLOB code in an HTML section. However, nothing seems to happen.
Could you please help me out in installing the BLOB on my site? www.digitalwebagency.nl.
Thanks in advance!
Kind regards,
Tibor.
Hi! Thanks for purchase! You inserted BLOB into the container that has zero height. You need to set some height to the parent container.
Thanks for your reaction! I already set a height for the container with the following code
Do you know what the problem is with it?
I see you set “width: 1000px; height: 1000px;” to the “blob_container”. No, please set it back to “width: 100%; height: 100%;”. You need to set height to the container that contains “blob_container”. I.e. you need to set height of the HTML block where you inserted the BLOB code. Just checked, it still has zero height.
I have changed the width back to “width: 100%; height: 100%;” and I’ve set a minimum section height of 800px. The HTML is inside of this section. However, it still doesn’t work.
elementor-section -- 800px height _elementor-container -- 800px height __elementor-row -- 20px height ___elementor-column -- 20px height ____elementor-column-wrap -- 20px height _____elementor-widget-wrap -- 0px height ______elementor-element -- 0px height _______elementor-widget-container -- 0px height ________blob_container -- 100% height
I think something goes wrong in the HTML on Elementor. However, I do not understand why, because I think I am not doing anything wrong. I created a test page from my hosting platform: https://digitalwebagency.nl/test.html using the following html:
<script src=”blob/jsband-min.js” type=”text/javascript”></script> <script src=”blob/blob-min.js” type=”text/javascript”></script> <script type=”text/javascript”> var blob = new BlobAnimation(“blob_container”, { //Blob main settings BLOB_SIZE: 220, BLOB_DISTANCE: 1000, DETALIZATION: 60, PERSPECTIVE_DISTORTION: 1, ROTATION_SPEED: 5, OFFSET_X: 0, //offset in pixels OFFSET_Y: 0, //offset in pixels PERCENTAGE_OFFSET_X: 0, //offset in percentages PERCENTAGE_OFFSET_Y: 0, //offset in percentages //Dot settins DOT_SIZE: 2, DOT_COLOR: ”#707b7e”, //Responsivity settings AUTO_SCALE: false, VIEWPORT_WIDTH: 1000, VIEWPORT_HEIGHT: 1000, //Mouse settings MOUSE_DISTANCE_MIN: 20, MOUSE_DISTANCE_MAX: 400, MOUSE_SENSITIVITY: 1, INERTIAL_TIME: 2, //Shape settins //Shape main settings INITIAL_SHAPE: { wave1: {amplitude: 35.165, frequency: 3, phase: 0}, wave2: {amplitude: 29.67, frequency: 1.923, phase: 0}, wave3: {amplitude: 9.89, frequency: 2, phase: 0} }, USE_MORPHING: true, USE_WAVE_MOTION: false, USE_WAVE_SWING: false, //Morphing settings MORPHING_AUTOPLAY: true, MORPHING_DURATION: 2, MORPHING_DELAY: 1, MORPHING_TRANSITION_TYPE: “cubic”, MORPHING_SHAPES: [ { wave1: {amplitude: 86.813, frequency: 2.747, phase: 4.592}, wave2: {amplitude: 27.473, frequency: 3.187, phase: 0}, wave3: {amplitude: 0, frequency: 2, phase: 0} }, { wave1: {amplitude: 49.451, frequency: 4.725, phase: 4.592}, wave2: {amplitude: 32.967, frequency: 3.242, phase: 4.143}, wave3: {amplitude: 161.538, frequency: 0.989, phase: 4.661} }, { wave1: {amplitude: 70, frequency: 3, phase: 0}, wave2: {amplitude: 60, frequency: 2, phase: 0}, wave3: {amplitude: 50, frequency: 2, phase: 0} }, { wave1: {amplitude: 0, frequency: 0, phase: 0}, wave2: {amplitude: 161.538, frequency: 1.978, phase: 0}, wave3: {amplitude: 0, frequency: 0, phase: 0} }, { wave1: {amplitude: 9.89, frequency: 2.747, phase: 2.313}, wave2: {amplitude: 0, frequency: 3.132, phase: 3.073}, wave3: {amplitude: 92.308, frequency: 1.209, phase: 1.657} }, { wave1: {amplitude: 118.681, frequency: 0, phase: 4.074}, wave2: {amplitude: 115.385, frequency: 0, phase: 4.039}, wave3: {amplitude: 141.758, frequency: 0.989, phase: 0} }, { wave1: {amplitude: 65.934, frequency: 4.176, phase: 2.313}, wave2: {amplitude: 28.571, frequency: 5.165, phase: 4.799}, wave3: {amplitude: 0, frequency: 1.209, phase: 1.657} }, { wave1: {amplitude: 39.56, frequency: 1.429, phase: 3.659}, wave2: {amplitude: 167.033, frequency: 0.769, phase: 3.383}, wave3: {amplitude: 0, frequency: 2.418, phase: 0} }, { wave1: {amplitude: 172.527, frequency: 2.253, phase: 0}, wave2: {amplitude: 0, frequency: 3.077, phase: 2.796}, wave3: {amplitude: 28.571, frequency: 0, phase: 0} } ] }); </script>This works, so I used the exact same HTML in the HTML box in Elementor. However, it doesn’t work.
Could you please help me out?
Yes, the problem is in HTML layout. We need to figure out how to access these nested elements within Elementor’s visual editor. Some of them have height = 20px, some are zero height. I need to experiment a little.
elementor-section -- 700px height _elementor-container -- 700px height __elementor-row -- 700px height ___elementor-column -- 700px height ____elementor-column-wrap -- 700px height _____elementor-widget-wrap -- 680px height ______elementor-element -- 0px height _______elementor-widget-container -- 0px height ________blob_container -- 100% heightSo 2 parent containers still have zero height. I accessed them via console and set height to “100%”. I also changed “blob_container” position to “static” in the same way. And blob animation appeared. So you need to do 2 things: 1. In “blob_container” element remove style attribute “position: fixed;” or set it to “position: static;”. 2. Set 100% height for the 2 containers mentioned. And everything will work fine.
Thank you for your reaction. What CSS did you use to do so? Because I am not able to write the required CSS.
Thanks in advance!
var div = document.getElementById("blob_container").parentNode;
div.style.height = div.style.width =
div.parentNode.style.height = div.parentNode.style.width = "100%";
window.addEventListener("resize", function(){blob.resize()});
blob.resize();
Hello, how to move the blob itself inside the canvas. I don’t want it to be in the center.
This feature will appear with the next update. For now you can do it in your HTML layout using additional nested DIV. Or I can slightly modify javascript code for you so that BLOB is displayed with some offset. Just message me through Facebook: https://www.facebook.com/activiotic
Hi! Please check an update. Now you can add an offset. Offset can be specified both in pixels and as percentage. You can even use “pixel offset” and “percentage offset” simultaneously. New settings: OFFSET_X, OFFSET_Y, PERCENTAGE_OFFSET_X, PERCENTAGE_OFFSET_Y. New API methods: offsetX, offsetY, percentageOffsetX, percentageOffsetY.
Hello,
Just curious if there is a way to offset the center of the blob? Right now the blob remains in the center of the canvas, but was wondering if there was a way to push it more towards the left. I tried increasing the padding, but it makes the blob cut off / not visible.
Thank you!
Hi, Yes, it can be done. For that I need to change the source code a little. Please, message me through Facebook: https://www.facebook.com/activiotic
Hi! Please check an update. Now you can add an offset. Offset can be specified both in pixels and as percentage. You can even use “pixel offset” and “percentage offset” simultaneously. New settings: OFFSET_X, OFFSET_Y, PERCENTAGE_OFFSET_X, PERCENTAGE_OFFSET_Y. New API methods: offsetX, offsetY, percentageOffsetX, percentageOffsetY.
Hi there, I did all steps and still can’t figure it out to work.
I added: <script src=”/blob/js/libs/jsband-min.js”></script> <script src=”/blob/js/blob-min.js”></script>
Then I copied code from an exemple (inside-6-random-color.html) starting at the div and finishing after the js script and added it to custom html in my theme.
Animation is not displaying and I’m getting 3 console errors: -Uncaught SyntaxError: expected expression, got ’<’ -Uncaught ReferenceError: jsband is not defined <anonymous> https://laplugtech.com/blob/js/blob-min.js:16 <anonymous> https://laplugtech.com/blob/js/blob-min.js:17 -Uncaught ReferenceError: BlobAnimation is not defined
I’ve been searching everywhere and trying to make it work, Can you still do something ? A video would be a great idea! What are your thoughts?
Hi! Thanks for purchase! Could you please give me a link to the web page so that I can better understand what is going on.
Sure, Laplugtech.com
It is up now
I’ve found error. The code itself is correct (2 script tags, div tag, script tag with settings), but you placed it within enother script tag. It’s not correct. If you paste the code without wrapping in a script tag, everything should work.
Dear fresh-look, Thank you for your response. The problem is with my theme (um-theme). When I enter html code in Appearance > Customize > Code, it appears to add <script = text/javascript> </script> automatically (doesn’t appear in the code input).
I haven’t found a solution on how to remove it and there is no html files in the theme files in order to modify it. Only php and css.
I found a way to add the animation but unfortunately I need to add the html block in each page. If ever you know a solution, Lmk!
Again, Thank you.
Sincerely, Jahmael
Maybe “Code” means JavaScript code, not HTML code. I.e. it assumes that you enter the javascript code and it generates tags automatically. Any WordPress builder has some component that enables you to enter raw HTML code. It is called either “Raw HTML” or “HTML Box” or something like that.
Hi,
I have 2 questions:
Question 1:
I didn’t find the “random color” preset in the project source. That’s what I wanted when I bought this project.
How can I get it?
Question 2:
Does the position of the blob have to be “fixed”? I have a scrolling-type website. I just want to use it at the top area of the page.
How to do so?
Kind regards,
Hi, Thanks for purchase! 1. You can find this example in the Examples folder: “inside-6-random-color.html”. 2. You can set any position, any style, units, z-index etc. Here BLOB is used as header: http://activiotic.com/products/blob/usage.html
Thank you. I think my main issue is that I’m not able to write on top of the blob. It either shows up above or below the text I want to write on.
No worries. I got it. Is there a way to disable mouse settings? I just want the animation to play and not change on mouse hover.
It all depends on your layout. BLOB is placed inside DIV. You can position this DIV as you like. Of course, it can be positioned so that BLOB serves as a background for your text, slogans, logos, etc.
As for mouse, you can set MOUSE_SENSITIVITY to 0. BLOB will not react on mouse movements then.
Hi there, just bought the blob
Was wondering if you have any scripts you can share for using this on react?
I’m pretty confused, not share how to approach this.
Thanks!
Hi, Thanks for purchase! Unfortunately, I am not a React user yet and I don’t have such scripts. But I’m sure it’s pretty simple task. In terms of DOM, my plugin is very simple: it just takes your div element, creates canvas within div and renders graphics to canvas. So, I think any developer familiar with React is able to wrap it in React component.
Hi I just bought this product and I am trying to use it in a Gatsby.js website. I am trying to import this into the hero.js component but I am unable to import the scripts into the js file. Any recommendations?
Hi! Thanks for purchase! Did you try just copy&paste these scripts at the beginning of your js code?
