Hey Bubblers,
Is there a way to animate an element to turn it over on its vertical axis, such as turning over a playing card, and reveal a text message behind it?
1 Like
Assuming you know how to apply css styling to a element, this is what are you looking for?
1 Like
Yes, that’s what I want to do. No idea how to css though.
The link given IS a good code to use for desktop.
If that’s the only place you plan to use it that’s great.
I believe you’ll still need to use an image in your file manager.
But, remember it won’t work on mobile because mobile needs a click event.
Here’s an example I did.
Everything is in one HTML element. No workflows involved.
It works when you click the card. So it will work on mobile.
The images are pulled from the file manager.
Obviously, you can use text for the front or back or both if you choose.
1 Like
Thank you for your help. It looks great but I have no knowledge of how to incorporate that language. Is there no way to do it in a workflow?
I guess you could create a group that is the size of the card you wanted. (Group A)
Set it to align to parent.
Create another group (Group B) and place it in the center of Group A and have it set 100% height and width. Then place a text element in it. Set up invisible on page load and collapse when hidden.
Place an image over that in the center with 100% width and height. Visible on page load.
When someone clicks the image do a workflow. Elements > animate >flipxout.
Then set a pause>show group B.
You’ll have to reverse it all if you want the user to be able to click again and show the first card.
Bubble doesn’t give you a lot of options on animations. Basic animations are easy using the animate function. But, I don’t see how you’ll be able to get the effect of a card flipping without some kind of code.
But, it’s something you can mess around with I guess, and see if you can get it to look good for you with no code.
Maybe someone else with more experience with Bubble animation has a better idea of doing a card flip without using code.
There might be a plugin available. I try not to use plugins much but there’s a lot of them. If you search the plugin marketplace you might find one.
Good luck with your project.
I released a plugin a while ago that does exactly what you’re looking for.
But of course, like @jefeoliveira22 and @senecadatabase said, this is totally possible if you know how to manipulate CSS and maybe a little JS depending on your use case. The plugin (as well as many others) is for those who don’t have technical knowledge of code and don’t even want to try to learn.
Feel free to check this out.
1 Like
Thank you, Seneca. That’s kinda what I thought. Thank you for the description.
Thanks Newed. That looks great.