Clickable and responsive bubble affects

Hey,

I am trying to implement on the app login screen, a form of a video which will show bubbles rising from the bottom of the screen while trying to get a GPS location/finding people around me.

The affect is similar to the Tinder app circle affect that is expanding on the login screen while trying to find people around my location.

Later, I would like to have bubbles floating on the screen which could be clickable. This is similar to Apple music section when they prompt the user to choose the genres and artist we like.

Is this possible ?

Thanks

For the loading animation, you can use an image in a format that supports animation.

Thanks I’ll give it a try

Like @Scott mentioned you can use a .gif or other format that supports animation. Another option is SVG animations. There are pros and cons to each. In regards to SVG, my go-to solution is an After Effects plugin called Bodymovin, which is capable of exporting an AE animation comp into HTML/SVG/Javascript (ie web-friendly). A few links that may help:

https://codepen.io/search/pens?q=bodymovin&limit=all&type=type-pens

I’ve been meaning to create a short tutorial explaining how I’ve been using this in my Bubble apps, but haven’t found the time. Let me know if you need any questions answered. Obviously my solution requires After Effects. With enough searching I bet you could find a ‘floating bubbles’ animation made completely in JS/CSS that you could implement as a HTML block in Bubble that only appears while the app is loading.

Found this on CodePen: https://codepen.io/johanharteveld/pen/hgGvm

3 Likes

Great. Thank you @philip. The codepen is exactly what I need. I understood that I can’t use the HTML alone and I need the CSS but the CSS cannot be imported into Bubble?

I have downloaded Adobe After Effect. Is it possible to create only an HTML code which can be then used on Bubble?

Thanks!

@philip I have implemented as an internal CSS and it’s working great. Thanks again!

1 Like

Awesome! Glad I could help.

@philip Is it possible you can assist me integrating this pen https://codepen.io/controversial/pen/wWVGOv into Bubble HTML framework? I have unsuccessfully tried to do this for the last 3 hours XD

Thanks in advance.

@orisomekh Did you figure this out?