Rotating an object on click

Jul 07, 2020

Hi everyone

I have a question about using states and spin animation to rotate an image. Its nice to have 4 states each rotated 90 degrees, but even better when you use the entrance animation to spin when you click on the item. I can get this working, but I cant work out how to time it right. Now the best i can do is have it jump between states 1 and 2 on the second time around which means the first 90 degree change is actually 180 degrees... I have tried playing with order of triggers and initial state to no avail...

9 Replies
Tom Kuhlmann

I see what's happening. When you change the state and it rotates, the state remains in that place where it rotated. So when you change the state again, it doesn't start from where it is in it's initial state, it starts from a relative position.

Here's a way to solve the rotation. However, it requires resetting the slide. Which moves the object. I assume you could just create X number of states to account for rotations.

https://360.articulate.com/review/content/b140da25-edce-45e0-9dcb-2987d164d122/review

Sam G

Hi Tom

I apologise for the delay in replying to you, since you did so much to try to work it out! Appreciate your video which explains the issue exactly. The idea is to use these shapes to make tangrams, so it would be difficult if the slide kept re-setting.

I'm wondering if the problem can be solved by getting state 1 to go back when going to state 2, but hiding it so we cant see it going back? Or resetting the state somehow? Or using layers so that they are all different objects not different states (but i can see that geting messey with the drag and drop, and it requires that layers can "run" even when they are hidden.

Or, how about the triangle can rotate 4 times, and then when you click again it goes in reverse? Would that solve it?

I am also going to experiment with using motion path 1 px circle instead of rotate animation.