Looped Animation on Hover in Principle

It was a moment in a project when we needed to craft a simple animation that is loaded while user is hovering UI element, has looped animation and reverting back to default state each time when the mouse is outside the object.

It should simply look like this one:

Let’s create a row it consists of three rectangles:

For simplicity’s sake just create it inside Principle:

I merged three artboards into the Component

Typically there are two states

1. Hover Outside. Static position of and arrow, no animation.
2. Hover Inside. Looped back and forth animation.

Lets create animation for arrow.

Typical scheme of animation is the following:

I put artboards with numbers for simple use.

Let’s play it in slow motion:

If the hover is out of the component the animation loop is breaking and 03-Auto moves arrow to initial state.

Hope this will help you to create nice looped hovers inside Principle for Mac.

Attached Source File — https://www.dropbox.com/s/3wczwhe6nxrmnhx/Looped%20Arrow.prd?dl=0