19 comments found.
Hi there, I just brought your Tube background (e2f82760-9fa2-4a7a-be99-6662e8d03c89) and I’m trying to use it on Divi.
Unfortunately, I can’t get it to work: I followed the instructions, loaded the .js, which I pointed to correctly, gave the Divi section the ID given in the code. The Tube does not appear, nothing happens, as if there is no code.
In the code in the examples I saw that if the div does not have “position: fixed” or “position: absolute”, the animated background does not show up. In Divi, if I assign these properties to a section, the section itself doesn’t display correctly (and anyway the Tube animation doesn’t show up that way either)
Please can you help me better understand how to use the code on Divi?
Thank you.
Regards
Update: The animation is visible, the problem now is that it does not behave as the background of the section, but rather as an object that is displayed at the bottom of the objects in the section. Is there any way to fix this, thanks!
Hello! Thank you for purchase! Could you please give me a link to the web page so that I can better understand what is going on.
As for “position” parameter, you can use any values: static(default), relative, absolute, fixed. You can take any example and check this.
Hello! Thank you for your great bundle! I’m having trouble running the Fluid in Wordpress Elementor. I copied an example, changed the file paths and it gives me this error: Uncaught TypeError: d.dispatchEvent is not a function at b (VM115165 jsband-min.js:127:416) at X.set src [as src] (VM115165 jsband-min.js:128:75) at X.ia (VM115165 jsband-min.js:42:94) at new X (Fluid-min.js:2:119) at Image.ta (Fluid-min.js:6:479) I suspect it is a problem with jquery, but I already tried jQuery.noConflict(), so I’m not sure how to go about it. The Blob works great, I haven’t tried the Tube or the Pave yet. Do you need other information?
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.
This is the link: https://new.biomyc.eu/news/ and the html code is in the first section, right before the heading
I found the reason of the problem. Please contact me via Facebook Messenger: https://www.facebook.com/activiotic/
Hi, I wanted to ask for your help as I am unable to properly install the tube on my Wordpress site using Elementor.
Here’s what I did: • From the Hostinger dashboard on which my website is hosted, I created a new folder under the public_html folder: (...)/public_html/tube • Placed the two .js files in the tube folder as you indicated • Went to my Wordpress website, added a HTML widget in a random section on my homepage, and pasted the following code which I basically copied from one of your previous comments above before inserting my own settings from your visual editor:
<script src=”../tube/jsband-min.js” type=”text/javascript”></script> <script src=”../tube/tube-min.js” type=”text/javascript”></script> <script type=”text/javascript”> var tube = new TubeAnimation(“tube_container”, { TUBE_SIZE: 200, TUBE_WIDTH: 50, TUBE_DISTANCE: 1000, PERSPECTIVE_DISTORTION: 1, TUBE_TORSION: 0.3, TUBE_STRETCH: 200, ROTATION_SPEED: 5, DOT_COLOR: ‘rgb(213, 216, 227)’, DOT_SIZE: 1.838, DETALIZATION: 183, MESH_DISTRIBUTION: 0, MESH_RATIO: 14, { wave1: {amplitude: 0, frequency: 4, phase: 0}, wave2: {amplitude: 0, frequency: 3, phase: 1.5}, wave3: {amplitude: 33.333, frequency: 2, phase: 1} }}); </script>___
What am I doing wrong? Is that a problem with Elementor’s HTML, the folder location or the code I am using?
Many thanks for your attention, looking forward to your reply!
Hi! Thanks for purchase! Could you please give me a link to the web page so that I have a better idea of what is happening.
{ wave1: {amplitude: 0, frequency: 4, phase: 0}, wave2: {amplitude: 0, frequency: 3, phase: 1.5}, wave3: {amplitude: 33.333, frequency: 2, phase: 1} } must be a value of SURFACE_INITIAL_DISTORTION or one of the stages within SURFACE_MORPHING_STAGES. Open any html-example within “Examples” folder using any text editor. You’ll see how to configure shapes and morphing queues. More info in the documentation or here: http://activiotic.com/products/tube/settings.html .
In your particular case the correct code is:
<script src=”../tube/jsband-min.js” type=”text/javascript”></script>
<script src=”../tube/tube-min.js” type=”text/javascript”></script>
<script type="text/javascript">
var tube = new TubeAnimation(“tube_container”,
{
TUBE_SIZE: 200,
TUBE_WIDTH: 50,
TUBE_DISTANCE: 1000,
PERSPECTIVE_DISTORTION: 1,
TUBE_TORSION: 0.3,
TUBE_STRETCH: 200,
ROTATION_SPEED: 5,
DOT_COLOR: 'rgb(213, 216, 227)',
DOT_SIZE: 1.838,
DETALIZATION: 183,
MESH_DISTRIBUTION: 0,
MESH_RATIO: 14,
SURFACE_INITIAL_DISTORTION: {
wave1: {amplitude: 0, frequency: 4, phase: 0},
wave2: {amplitude: 0, frequency: 3, phase: 1.5},
wave3: {amplitude: 33.333, frequency: 2, phase: 1}
}
});
</script>
If you need help with configuring shapes and animation, just contact me via https://www.facebook.com/activiotic
You need to create a DIV having id “tube_container”.
The final code is:
<script src=”../tube/jsband-min.js” type=”text/javascript”></script>
<script src=”../tube/tube-min.js” type=”text/javascript”></script>
<div id="tube_container" style="width: 100%; height: 100%;"> </div>
<script type="text/javascript">
var tube = new TubeAnimation(“tube_container”,
{
TUBE_SIZE: 200,
TUBE_WIDTH: 50,
TUBE_DISTANCE: 1000,
PERSPECTIVE_DISTORTION: 1,
TUBE_TORSION: 0.3,
TUBE_STRETCH: 200,
ROTATION_SPEED: 5,
DOT_COLOR: 'rgb(213, 216, 227)',
DOT_SIZE: 1.838,
DETALIZATION: 183,
MESH_DISTRIBUTION: 0,
MESH_RATIO: 14,
SURFACE_INITIAL_DISTORTION: {
wave1: {amplitude: 0, frequency: 4, phase: 0},
wave2: {amplitude: 0, frequency: 3, phase: 1.5},
wave3: {amplitude: 33.333, frequency: 2, phase: 1}
}
});
</script>
Hi ! I`m trying to make it work in a Salient Theme with WP Bakery … adding a row and inserting Raw HTML with the instructions you provide …- and i see nothing … please help ;))
Hi, thanks for purchase! Could you please give me a link to the web page so that I can determine the reason of the error.
very nice. I have installed on WP with Thrive architect using the HTML block. However, no matter what I try to do with div settings, the animation does not fix to its location and stays ‘sticky’ – right down to the bottom of the page. It does not at all stay in the div. I have tried !important for the relevant fixed position and parameters with no luck. Any ideas please? I also have tried placing the animation on a background element, in a content box and a plain div. Thank you. de37188a-76fb-45e7-bd03-21013fed42d2 Keith.
Hi! Thanks for purchase! Could you please give me a link to the web page so that I have a better idea of what is happening.
Thanks for the response. The page is: https://sydneybusinessweb.com.au/stunning-visual-effects-for-your-website/ – as you scroll, you will see that the animation stays where it is on the visible page – you can see it on the text if you look closely when you scroll. I have also just seen that on iPhone, the animation shows up with the same problem, plus it only appears once and if you reload the page it ’s gone until you purge the website cache. Thank you very much.
Thanls for the link.
Animation does not displayed at all. I looked through source code and noticed you initialize TubeAnimation before scripts loaded. That’s why we see nothing.
You need to load scripts first ( jsband-min.js & tube-min.js ). After that you can create TUBE: var tube = new TubeAnimation(...
Hmm interesting – thank you. OK so I had the scripts loaded in the header – you should see it now ( for some reason I saw it before). I moved them from the header into the html and mobile now loads consistently. I also checked against Chrome and Safari as well. Now the problem of overflowing the div and stating right where it is, is still there. What now sir? Thanks. Keith
Incidentally i think the problem was caused by an aggressive setting on Nitropack caching and CDN. (deferred JS?) Tx.
<div id="tube_container" style="position:fixed !important;right:20px;width:100%;height:80%;"> </div>That’s why it does not respond to scrolling.
Now it’s invisible because your div has zero height.
LOL!@ I am busy working on it so that’s temporary. I will not bother you again and I apologize for my errors. I will run it on dreamweaver!
Thanks again for purchase and good luck!
P.S. I will be grateful if you rate this product under “downloads” section 
Hello! First of all sorry about my poor english.
Im trying to install TUBE in my client’s website (this is his codecanyon account)
Im using Wordpress with Elementor Buider.
I’ve created the tube folder in my childs theme with both JS files as indicated.
At the home page I’ve added an HTML box (using Elementos’s HTML widget) and pasted the following code within it but nothing seems to happen:
What could I be doing wrong?
Thanks! Candela ccdurietz@gmail.com <script src=”../tube/jsband-min.js” type=”text/javascript”></script> <script src=”../wp-content/themes/oceanwp_child/tube/tube-min.js” type=”text/javascript”></script> <script type=”text/javascript”> var tube = new TubeAnimation(“tube_container”, { //Main settings TUBE_SIZE: 206.471, TUBE_WIDTH: 34.706, TUBE_DISTANCE: 1000, PERSPECTIVE_DISTORTION: 1, TUBE_TORSION: 0.294, TUBE_STRETCH: 205.882, ROTATION_SPEED: 5, DOT_COLOR: ‘rgb(255, 232, 244)’, DOT_SIZE: 2, DETALIZATION: 180, MESH_DISTRIBUTION: 0.2, MESH_RATIO: 14, //Mouse settings MOUSE_DISTANCE_MIN: 20, MOUSE_DISTANCE_MAX: 400, MOUSE_SENSITIVITY: 1, INERTIAL_TIME: 2, //Surface distortion settings SURFACE_INITIAL_DISTORTION: { wave1: {amplitude: 0, frequency: 4, phase: 0}, wave2: {amplitude: 4.902, frequency: 3, phase: 0}, wave3: {amplitude: 0, frequency: 2, phase: 1} }, USE_SURFACE_MORPHING: false, USE_SURFACE_MOTION: true, USE_SURFACE_SWING: false, //Surface motion settings // WAVE_1_MOTION_SPEED: 2, WAVE_2_MOTION_SPEED: 10, //WAVE_3_MOTION_SPEED: 1.5 });</script>
Whenever I try to change the root of the JS files with something like this: src=“wp-content/themes/oceanwp_child/tube/jsband-min.js” type=”text/javascript” src=”wp-content/themes/oceanwp_child/wp-content/themes/oceanwp_child/tube/tube-min.js” type=”text/javascript”
I get the following message: “Unable to load “tube-min.js”. Make sure the document does not contain a global variable named “TubeAnimation”
Could you give me a link to the web page so that I can determine the reason of the error.
Yes! thank you for the quick answer: http://hrya.net/ (It is in construction mode, but I have now put the same code in the construction page)
var tag = document.getElementById('tube_container').parentNode;
tag.style.height = '700px';
tube.resize();
Press [Enter].
You’ll see animation because your div now has 700px height.
Great thanks! that worked!!!
The only problem is that every time I make any change in the HTML box I get this error: “Unable to load “tube-min.js”. Make sure the document does not contain a global variable named “TubeAnimation”
I am able to edit the code, but on every character that I put I get the message. Have you goy any idea why could it be?
Thanks a lot! I love the animation!
This message means that web page already has variable “TubeAnimation”. It warns you that system has prevented overwriting variable with the same name. Probably Elementor recreates this variable every time you make any change. Please contact me via private message or Facebook Messenger. I’ll send you modified “tube-min.js” that has no warnings.
Thanks a lot!!
The first thing to congratulate you on your product, it is incredible!
I’m writing you because I’m a bit clumsy for this and I can’t understand how I can make it work. The Wordpress theme that I have does not have any builders and I don’t know if they are compatible (I think not).
Theme: https://themeforest.net/item/airtifact-portfolio-creative-wordpress-theme/21952418
My question is how I can make it work without a builder, if there is another way. I would like to put it as a background for some page.
Sorry for the inconvenience and thank you very much.
<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="position:absolute; width: 600px; height: 600px;"> </div>
<script type="text/javascript">
var blob = new BlobAnimation("blob_container", { });
</script>
Of course, “jsband-min.js” and “blob-min.js” must already be on your site.
I’m not familiar with theme you mentioned. Maybe it’s author can tell you more about customization.
<script src="../tube/jsband-min.js" type="text/javascript"></script>
<script src="../tube/tube-min.js" type="text/javascript"></script>
<div id="tube_container" style="position:absolute; width: 600px; height: 600px;"> </div>
<script type="text/javascript">
var tube = new TubeAnimation("tube_container", { });
</script>
“jsband-min.js” and “tube-min.js” must already be on your site.
It works perfectly!! Many thanks <3
Cool! I will be grateful if you rate this product under “downloads” section. Thanks in advance!
Hi there, could you possibly guide me a bit on how to add this to wordpress?
<script src="../tube/jsband-min.js" type="text/javascript"></script>
<script src="../tube/tube-min.js" type="text/javascript"></script>
<div id="tube_container" style="position:absolute; width: 100%; height: 100%;"> </div>
<script type="text/javascript">
var tube = new TubeAnimation("tube_container", { /*settings*/ });
</script>
You can replace /* settings */ with any settings allowed by this application. There are many html-files with ready-made settings in the Examples folder.
You can also experiment with style attribute.
Добрый день, подскажите как сделать задержку появления tube. Обычная задержка не вариант, так как нужно чтобы объект начинал появляться с первой фигурой, то есть с самого начала кадра. Если делать через css то к моменту появления первая фигура проходит и начинает следующая.
var DELAY_TIME = 1;
var settings = {
/* tube settings */
};
setTimeout(function(){var tube = new TubeAnimation("tube_container", settings);}, DELAY_TIME * 1000);
В данном примере через 1 секунду создается экземпляр TUBE и стартует анимация. Вместо /* tube settings */ могут быть любые настройки TUBE, описанные тут: http://www.activiotic.com/products/tube/settings.html
спасибо
разобрался, спасибо
Добрый день, подскажите как лучше разместить две фигуры на одной странице в разных местах со стороны производительности?
Здравствуйте! Создайте под каждую фигуру отдельный div-элемент. Если нужно, чтобы фигуры наслаивались друг на друга, задайте div-элементам прозрачный фон.
Hi, how do I edit the appearance delay?
var DELAY_TIME = 1;
var settings = {
/* tube settings */
};
setTimeout(function(){var tube = new TubeAnimation("tube_container", settings);}, DELAY_TIME * 1000);
I tried your suggestion to create a Div in the modal-body to initialize the background but I’m not having any luck. Can I email you some of the code snippet to get your insight on what I am doing wrong?
Just sent you email
Can this be used for animated modal background (e.g. Bootstrap 4 modal-body)?
Yes. This background can be generated within an empty DIV element. You can create an empty DIV within “modal body” and initialize background within it.
Thank you for the quick reply and confirmation
Is this the correct implementation for editing the waves? I do not see any of thew wave changes applied
var tube = new TubeAnimation(“this-div”,{ TUBE_SIZE: 142.873, TUBE_WIDTH: 29.853, TUBE_DISTANCE: 1044.118, PERSPECTIVE_DISTORTION: 1.176, TUBE_TORSION: -0.637, TUBE_STRETCH: 458.824, ROTATION_SPEED: 3.088, DOT_COLOR: ‘rgba(229, 232, 23, 1)’, DOT_SIZE: 0.787, DETALIZATION: 296, MESH_DISTRIBUTION: 1.529, MESH_RATIO: 14.191, wave1: {amplitude: 148.039, frequency: 4, phase: 1.571}, wave2: {amplitude: 110.784, frequency: 3, phase: 0.924}, wave3: {amplitude: 179.412, frequency: 0, phase: 1.54} });
Sorry, this was a stupid question. I just read the setting pdf and found the answer
Thanks anyway
It’s ok Thank you for purchase! Hope this product fits your needs.
Congratulations ! Nice Work, GLWS
Many thanks!
GLWS!
TNX!
hello..I see your profile page. really you have greats portfolio GLWS:)
Thanks for kind words.
Great Work, Congratulations GLWS
Thank you!
Congratulations!!! Nice Work, Good Luck With Sale
Thanks so much!
Nice work, good luck with sale
Thanks a lot!
