Turn over an image

1theritzy · 2024-08-13T23:24:21.682Z

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?

jefeoliveira22 · 2024-08-14T01:10:57.757Z

Assuming you know how to apply css styling to a element, this is what are you looking for?

w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

1theritzy · 2024-08-14T02:56:55.328Z

Yes, that’s what I want to do. No idea how to css though.

senecadatabase · 2024-08-14T09:27:47.230Z

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.

Screen recording 2024-08-14 4.59.47 AM

1theritzy · 2024-08-14T15:35:25.196Z

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?

senecadatabase · 2024-08-14T17:15:58.943Z

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.

Newed · 2024-08-14T17:21:51.594Z

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.

Plugin Page
Demo Page

1theritzy · 2024-08-14T18:07:56.968Z

Thank you, Seneca. That’s kinda what I thought. Thank you for the description.

1theritzy · 2024-08-14T18:08:19.238Z

Thanks Newed. That looks great.