Pulsating effect using CSS

Need help
1

Hi Bubblers,

Does anyone know if is possible to get this effect using the CSS Tool plugin?

Thanks!

1 Like
2

Hi, nice effect!

I think you can just create an HTML block with same html of the codepen inside.

You place a csstool.

And then create a workflow When the page is loaded: element/ specify custom CSS and copy paste the CSS present in codepen. (I woukdn’t Put the body css part)

3

Thanks @mattmazzega, i tried but i get nothing

The html:
1

The CSS Tool:
2

And the WF:
3

i think i’m missing some steps

4

Hello @qaz.wscuther

That’s something very simple.
You need to add the div id to the html element too.
1- Go settings > General > Mark checkbox “Expose the option to add an ID attribute to HTML elements”
2- Go to your HTML element and set the same div id (in this case: pulsating-circle)

3- Add the html code to your html element:

4- Add CSS to the page, and set a unique id, (no needs to be the same id of the html). I.e:

5- Run the workflow “Add custom style…” and paste the CSS code. IMPORTANT: ALWAYS CHECK THE CSS CODE YOU COPYING FROM CODEPEN, JSFIDDLE, OR OTHER RESOURCES IS COMIPLED. BECAUSE WHEN YOU OPEN THAT PAGE, BY DEFAULT IT SHOWS NOT COMPILED, SO PROBABLY WILL NOT WORK. I.e:
Uncompiled: 62 lines (https://puu.sh/ACzqo/a93c6cb988.png)
Compiled: 91 lines (https://puu.sh/ACzr7/f0eff31244.png)

To change from uncompiled to compiled:

6- After you got the compiled css code, paste it in the step 5 workflow, and set the same element id you put in the step 4 (not the html div id).

7- Test

Live: https://pulsecircle.bubbleapps.io/version-test
Editor: https://bubble.io/page?name=index&id=pulsecircle&tab=tabs-1

Regards.

5 Likes
5

Amazing! Thanks @yusaney1!! :clap::clap: :clap: :clap:

6

That is pretty cool (just stumbled across this) :slight_smile:

I would have thought though that you’d be able to put that CSS into the tags just within a normal HTML element but after playing myself it didn’t work. Don’t suppose you’d know why would you @yusaney1?

Would it be something to do with the CSS pre-processor being SCSS? (saas)
I was curious

7

You can load also inside the html element the css code, but you have to keep in mind that element will load always on page load, you can’t play with events/conditions, thats the point of using the css plugin.

If you are interested on how i did, there’s 2 different methods.

1- Using stylesheet link:
https://puu.sh/ACBb0/096caaacc1.png
Live: https://pulsecircle.bubbleapps.io/version-test/index2
Editor: https://bubble.io/page?type=page&name=index2&id=pulsecircle&tab=tabs-1

2- Using <style> tags:
https://puu.sh/ACBar/f7507fcd38.png
Live: https://pulsecircle.bubbleapps.io/version-test/index3
Editor: https://bubble.io/page?type=page&name=index3&id=pulsecircle&tab=tabs-1

Regards.

8

That’s really helpful stuff, many thanks.
I see where I went wrong straight away with the way I structured the HTML.
Learn a lot from this!

9

This topic was automatically closed after 70 days. New replies are no longer allowed.