HTML+CSS+JS on Bubble for awesome animations

[eurogar]

Hi! I’m trying to implement this cool Chill the lion (codepen.io) mouse-based animation on Bubble, but I think it’s failing for the JS part. This is what I’ve done:

1. Added an HTML element to the page that has the HTML code and the CSS code (under tags)
2. Added 2 JavascripttoBubble elements (using the Toolbox plugin): bubble_fn_animation1 and bubble_fn_animation2. I’ve used 2 elements because the JS code returns 2 values.
3. Added a workflow on page load to “Run javascript” with this script:

function myFunction() {
 //Here goes the JS code from codepen (copy/paste)
};
bubble_fn_animation1(Math.min(Math.max(v, min), max));
bubble_fn_animation2(tv);

However, it seems like the JS function doesn’t run, hence the animation is not displayed (but the background is, so the HTML+CSS part is working).

Any ideas?

[hergin]

I think there is some inconsistency in the code. If you put it all in one html like I did, it should work. See the example: Test for Forum 12 | Bubble Editor

Also make sure it is iframe. For some reason, it doesn’t work when it is not:

[eurogar]

OMG it works like a charm, thanks a lot @hergin ! You made my day

Just to be clear, how did you export the 3 codes as one unified HTML code? I can just mimic what you did, but would like to know if there’s a way to directly export the unified file from codepen or if you have to merge them manually.

Thanks again!

[hergin]

When you login, you can download the whole example as files from codepen. Of course, you still need to have some basic html knowledge to put things together.

[eurogar]

Got it! So login to codepen, export as ZIP, extract it, then open the “dist” folder (3 files inside, for the HTML, CSS and JS code) and modify the file index.html like this:

1. Substitute the line <link rel="stylesheet" href="./style.css"> with the content of the style.css file (add <style></style> tags around it)
2. Add the content of the file script.js at the bottom (before the </body> tag) , adding <style></style> tags around it

Then copy the resulting code and paste it into a Bubble HTML element (enable 2 options: iFrame and wait to render) and ready!

So, as far as a mouse animation is provided as an HTML+CSS+JS, we could use it on Bubble by wrapping the code as explained above.

Thanks a lot for your huge help, @hergin !

[hergin]

@eurogar

So, as far as a mouse animation is provided as an HTML+CSS+JS, we could use it on Bubble by wrapping the code as explained above.

Yes, thats mostly what HTML element is for.