Adobe XD: Unable to rotate object ONCE 360° (auto-animate) when hovering over it

[angelag98969912]

Hi there, 

I would like an object in Adobe XD to rotate 360 degrees ONCE when I hover over it.
First, of course, I created a hover state in addition to the object's default state and entered 360 degrees in the "rotate" field. The number either kept jumping back to zero or the 360 entered was always set in both states, even though it should only apply to the hover state.
Then I found a trick: Grouping the individual object or creating a component from it, I could double-click to enter the "content" - the element - and type in 360 degrees. Then it wasn't set in the default state and the object rotated. But unfortunately, the object always rotates two times in a row. Is there a way around this? It should only rotate once...

One more thing: I wanted to add a little playful character to the individual parts of the logotype.

It seems that the hover effects cannot overlap - they just don't want to play simultaneously. The next element only starts moving when the previous hover animation of another element is completed. Is there a way to have multiple animations visible at the same time? It would be nice to have a little more movement in it....

I sincerely hope someone can help me. I'm currently working on my bachelor project with a lot of time pressure and I firmly expected the implementation to work as I wanted them to. I just pray that someone has a solution for me... I would be incredibly thankful.

[AkinGn]

Hi @angelag98969912 , as you said, the first thing I'd try would be grouping the object/putting it into a group and then double clicking the group to make the changes just in the hover state, and as I see it it works, it only rotates once in the example, if I'm not missing something, you can check the prototype: https://xd.adobe.com/view/61c63113-b1a9-4b8f-bbed-1a7f42dd9fe3-3495/ and the file: https://www.dropbox.com/s/j6b5m3o346jqgeo/rotate-360-test.xd?dl=0 Hope this helps 🙂 
Edit: If you mean it roates 360 degrees on both hover and on exiting the hover (sorry don't know the exact term for the opposite of hover :)) you can set rotation to 180 degrees and it kinda solves your problem right 😉

[angelag98969912]

Hi @AkinGn ,

thanks for your reply! From what I see, it still rotates twice. In my example as in yours as well. Maybe the "exiting of the hover" is causing this but this also happens when I am rushing hovering over the object for just a split second and not waiting until the animation is completed. setting the rotation to 180 degrees was a great idea and I was excited this could be the right answer but unfortunately after rotating 180 degrees it rotates backwards back to its original state... I also tried rotating the object 159,5 degrees so that the viewer probably doesn't notice the uncompleted rotation but in this cases it will also rotate back the almost whole rotation back to the default state. Is there a way to avoid that happening?

Still hoping for a solution 😕

Thanks for trying some things out though!

[AkinGn · Accepted solution]

Hi @angelag98969912 , yes it's how hover works, it reverses the changes on exit. Hmmm I think instead of using hover I'd create a toggle state and use tap/click to animate once. That's the only way I can think of now. Hope this helps 🙂  Edit: I'm not sure about the overall effect you want to create but if it's possible, creating a bigger element in the background (like with the size of the artboard etc), grouping it with the element you want to rotate and creating a component from that group and adding a hover state which rotates the inner element would also achieve one time rotating (as long as you stay in the boundaries of that bigger background element of course, as you know;) could be another solution (if you already haven't tried and decided not to use of course, but it's a way achieves the effect you want right 🙂