Moving bubble elements using CSS (translate)

Need help App Organization
1

Is there a way to move elements using CSS? I’ve tried using transform: translate(x,y) in the tags in the HTML element but it doesn’t work even “!important”. Any tips on how to do this or if it is possible?

I’ve tried using the draggable element vertical and horizontal offset worklow but it doesn’t have % offset so impossible to correctly center images whose dimensions are dynamic.

2

I got this from @Thimo , but I can’t find the original tweet. This is how he gets the floating boxes on his page. Is this what you mean?

CleanShot 2022-02-10 at 09.46.57

<style>
#yourElementId {
 -webkit-animation: action 2.5s infinite alternate;
 animation: action 2.5s infinite alternate;
}

@-webkit-keyframes action {
 0% { transform: translateY(0); }
 100% { transform: translateY(-20px); }
}

@keyframes action (
 0% { transform: translateY(0); }
 100% { transform: translateY(-20px); }
}

</style>

Otherwise, I think you can use the Draggable elements plugin to move a group around.

3 Likes
3

Thanks for the qukck reply! I actually only need to vertical & horizontal align the draggable element relative to the parent group with a press of a button. The standard workflow doesnt allow dynamic inputs:
image

So I assumed i needed to use translate: transform (x,y) in the HTML element and refer to the draggable group to vertically & horizontally align, but I cannot figure out a way yet