Spin Animations for Accident Simulation / Teeter Workaround

Aug 05, 2011

This afternoon I really wanted a broken glass image to rock back and forth to 'simulate' (in a cheesy way) a 1st-person view of an accident.

I found the Teeter animation exactly what I wanted; however, when published, it overlays a solid colour over any image you used the 'Teeter Animation' with. (Looks like more of a function from PowerPoint than Articulate).

After a bit of troubleshooting I gave up and moved onto the 'Spin' animation. With the spin animation you can limit the angle of 'spin' and set your image spin direction (counter clockwise/clockwise).

So I tried to mimic the teeter animation...

I added 10+ spin animations, each set to 'start after previous' to my image.

Animation 1 - I set to 32 degrees clockwise.

Animation 2 - I set to 64 degrees counter-clockwise (32 degrees to get it back to the original position and an additional 32 degrees, resulting in one even teeter.)

Because I wanted my 'teeter' to decrease in action...

Animation 3 - I set to 48 degrees clockwise (32 degrees to get it back to the original position, and 16 degrees past, to start the next teeter)

Animation 4 - I set to 32 degrees counter-clockwise (now only 16 degrees to get back to the original position, and another 16 to finish off the second full teeter).

Animation 5 to 10+ - I evenly decreased the 'spin' flipping back and forth from clockwise/counter clockwise until my faux-teeter decreased in strength and fizzled out.

I also played with the Animation speeds. Having them very fast to start and slowing down as the effect progressed showing a decrease in 'accident momentum'.

The effect turned our very well! So I thought I'd share!

If there's an easier way of doing this, please let me know; I had to bust out some math skills for this one!! 


1 Reply