Animate Border of a group

jackedwards664 · 2025-02-13T17:56:45.406Z

Hi, The easiest way to animate just the border of a group.

I only need this once on my site,. I see there is a plugin for $2 a month, but just need it for one thing, so rather not pay.

Any easy Html I can add, or something?

Thanks

hi.luisacosta · 2025-02-13T18:03:44.813Z

What animation are you looking for? Most likely you could use ChatGPT to get this done for you.

jackedwards664 · 2025-02-13T19:39:59.019Z

Thanks for answering…

Just the border of an embedded vimeo video. I would like it to flash or something to bring emphasis.

I did, they said to add CSS, so was just wondering if bubble had added anything like that somewhere i’m missing that might be simpler.

sociosemp · 2025-02-13T19:52:28.839Z

Hey @jackedwards664. Can you share an example like this animation that you need. Maybe, it can be more easy if i see it and have an ideia about that

jackedwards664 · 2025-02-13T19:56:21.892Z

This is what I found, and also the plug in;.

sociosemp · 2025-02-18T12:57:01.006Z

Hey @jackedwards664. Resolved. I ll write the step by step.

Enable IDs in Bubble:

Go to Settings → General → Expose the option to add an ID attribute to HTML elements.

Add the Group in the Editor:

Insert a Group that will serve as the element to which the style will be applied.
Assign an ID to the group, for example, animated-box.

Add an HTML Element:

Insert an HTML element on the page, anywhere (it doesn’t need to be inside the group).

Add the CSS to the HTML:

Paste the following code into the HTML element:

#animated-box { position: relative; width: 200px; height: 200px; margin: auto; background: url("//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1); color: #69ca62; box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5); } #animated-box::before, #animated-box::after, #animated-box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #animated-box::before, #animated-box::after { content: ""; z-index: -1; margin: -5%; box-shadow: inset 0 0 0 2px; animation: clipMe 8s linear infinite; } #animated-box::before { animation-delay: -4s; } #animated-box:hover::after, #animated-box:hover::before { background-color: rgba(255, 0, 0, 0.3); } @keyframes clipMe { 0%, 100% { clip: rect(0px, 220px, 2px, 0px); } 25% { clip: rect(0px, 2px, 220px, 0px); } 50% { clip: rect(218px, 220px, 220px, 0px); } 75% { clip: rect(0px, 220px, 220px, 218px); } } html, body { height: 100%; } body { position: relative; background-color: #0f222b; } *, *::before, *::after { box-sizing: border-box; }

( the css editor you inserted above )

In preview:

image1888×968 44.8 KB

change the group photo in css: url(“//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png”)

keep me posted if it works or not

Remember, assign an id to your group. and give it a name that you can reference in the css

Bestss

jackedwards664 · 2025-02-18T14:37:38.353Z

Thank you for the response, will work on that today and update.

system · 2025-04-24T17:57:45.098Z

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