Add animated blobs to your Bubble app

A short tutorial on adding beautiful animated blobs to your Bubble app.
Key links:
* Preview: bh-examples.bu...
* Editor (for copy & pasting the code): bubble.io/page...
* Fancy Border Radius Generator: 9elements.gith....
Documentation links
developer.mozi...
developer.mozi...)
www.w3schools....

[@elifozoglu1677]

Thank you so much. If you create more videos like this for bubble, we would really appreciate it. Thanks for your effort!

[@buildwithdamian]

Sample code:
#myblob {
border-radius: 46% 54% 42% 58% / 58% 62% 38% 42% !important;
animation: move 40s ease-in-out infinite;
transform-origin: 50% 50%;
}
@keyframes move {
0% {
transform: scale(1) translate(10px, -30px) rotate(0deg);
background: #FFF559;
}
38% {
transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
background: #A0F8EE;}
40% {
transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
background: #A0F8EE;
}
78% {
transform: scale(1.3) translate(0vw, 40vh) rotate(-40deg);
background: #D62755;
}
80% {
transform: scale(1.3) translate(0vw, 40vh) rotate(-40deg);
background: #D62755;
}
100% {
transform: scale(1) translate(10px, -30px) rotate(0deg);
background: #FFF559;
}
}

[@dylaniator478]

Very useful. Thanks!

[@cornhub576]

Thanks for this vid! Subscribed! Can you also make a tutorial on how to implement ajax in bubble ?

[@hnm-zi2ep]

how to send the shape back when the coups are all responsive (column/row)

[@808thampire]

How do I make a shape within a repeating group appear in an animated way instead of just popping up on the screen?

[@no-codeclub.8134]

From where can we get animation move.

[@buildwithdamian]

#myblob {
border-radius: 46% 54% 42% 58% / 58% 62% 38% 42% !important;
animation: move 40s ease-in-out infinite;
transform-origin: 50% 50%;
}
@keyframes move {
0% {
transform: scale(1) translate(10px, -30px) rotate(0deg);
background: #FFF559;
}
38% {
transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
background: #A0F8EE;}
40% {
transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
background: #A0F8EE;
}
78% {
transform: scale(1.3) translate(0vw, 40vh) rotate(-40deg);
background: #D62755;
}
80% {
transform: scale(1.3) translate(0vw, 40vh) rotate(-40deg);
background: #D62755;
}
100% {
transform: scale(1) translate(10px, -30px) rotate(0deg);
background: #FFF559;
}
}

[@housefull2432]

@@buildwithdamian can do tutorial ui bubbles