Ability to make an image (not an icon) rotate?

Hi there, Bubble community… just a quick question here… am I crazy or did the ability to make an image (as opposed to an icon) rotate used to exist and now it doesn’t anymore?

When I first started using Bubble maybe six or so months ago, I swear I remember uploading an image and then just for a goof, I made it rotate because I thought it would be humorous to see a dog’s head go round and round for a bit. I remember chuckling for a few seconds and then I unchecked the rotate box and moved on with my life.

Well, now I actually want to make an image rotate, and I don’t see the option anymore. Did I make that option up in my head and just dream about a spinning dog’s head? Or did the option used to exist and it doesn’t anymore?

Thanks, in advance, for any responses that either confirm or refute my aforementioned craziness.

Best…
Mike

Hi Mike, I don’t recall any Bubble image rotation. So it’s probably in your head :grinning:
There’s this none free plugin that make the job: Move and Rotate element.

edit: I forgot this one too

this is not animated
https://puu.sh/C56xo.png
try this library
https://daneden.github.io/animate.css/
or search
https://duckduckgo.com/?q=animate+rotate+css&atb=v139-6__&ia=web

Not a free plugin, but this could maybe be what you are looking to do
https://bubble.io/plugin/transformations-1541997549357x184037680618668030

Thanks so much for the responses, JohnMark, max79268, and ryley.randall! I’m not sure what it says for my sanity that I am all but certain I made a dog’s head spin at one point with just one click of a checkbox, but it probably doesn’t make me much crazier than I already was. :slight_smile:

I had seen those plugins already but I will look a little closer at them now… thanks again!

2 Likes

Anyone stumbling across this (like me), you can do it like this without a plugin, as I wanted to do the same.

In your Image Element, give it an ID Attribute like so:
image

Now create a button and give it a workflow action that runs when it’s clicked.
In the workflow, add a “Run JavaScript” action:


Copy and paste the following code, this will rotate the image by 90 degrees upon each click.

var curr_value = document.getElementById(‘imageLarge’).style.transform;
var new_value = “rotate(90deg)”;

if(curr_value !== “”) {
var new_rotate = parseInt(curr_value.replace(“rotate(”,“”).replace(“)”,“”)) + 90;
new_value = “rotate(” + new_rotate + “deg)”;
}

document.getElementById(‘imageLarge’).style.transform = new_value;

Now click the button! and voila!

5 Likes

Hi @pork1977gm, I tried with an image element, giving and the ID attribute “imageLarge”, and with a button running the javascript:

var curr_value = document.getElementById(‘imageLarge’).style.transform;
var new_value = “rotate(90deg)”;

if(curr_value !== “”) {
var new_rotate = parseInt(curr_value.replace(“rotate(”,"").replace(")","")) + 90;
new_value = “rotate(” + new_rotate + “deg)”;
}

document.getElementById(‘imageLarge’).style.transform = new_value;

but it doesn’t rotate. May be there is another thing I must do?

thanks

Hey,
May I know if you’re trying to achieve the following outcome, please?

1 Like

Hi, yes ! but I made it with an html code that I see in another post.

Thank you

1 Like

Hi Juan,

Could you share the code you found in the other post ?

Best

Hi, sorry sorry for the delay in responding.

I found a solution that works fine with no much effort for me (i’m a beginner). May be there are more effective ways to do it, but this was free and good for me.

First, I put an Image element in my page, and created for it a state called “angulo” (angle) with a custom state of “0”. (The url state is for dynamic images that I use from external data from an api, but it depends on your needs)

Then I added to that image element, an "ID attribute to call that element : “imageLarge”

Then with a button, i added a workflow that when clicked, add 90 degrees to that custom state.

And finally, I put an invisible html element with this code:

<style>
#imageLarge {
-ms-transform: rotate(Imagen's angulodeg); /* IE 9 */
-webkit-transform: rotate(Imagen's angulodeg); /* Chrome, Safari, Opera */
transform: rotate(Imagen's angulodeg);
}
</style>
#imageLarge { -ms-transform: rotate(Imagen's angulodeg); /* IE 9 */ -webkit-transform: rotate(Imagen's angulodeg); /* Chrome, Safari, Opera */ transform: rotate(Imagen's angulodeg); }

I hope it can serve you.

1 Like

I tried your technique to rotate an image uploader. I wasn’t given an option to set a state but when I grouped it with more elements, I was able to create a state but there was no option to edit ID attribute. Have you tried rotating plug in elements, input fields, or groups?

I find out this way to rotate an image.

First insert an ID for your image:

Then insert this style code in your SEO / Metatags settings:

<style>
    #imageInProgress {
		animation: rotation 8s infinite linear;
	}

	@keyframes rotation {
  		from {
    		transform: rotate(0deg);
  		}
  		to {
    		transform: rotate(359deg);
  		}
	}
</style>

I hope this help! :slightly_smiling_face:

1 Like