Auto Transition Hack

In this tutorial, you’ll learn how to use the auto event transition to create a flashing cursor. You’ll also learn how to create invisible hotspots by setting the fill alpha (not the opacity alpha) to zero to dismiss the keyboard and revert the form field to its original, un-clicked state.

A little background about the auto event transition: It occurs automatically without any user interaction, so it’s great for looping animations (like a cursor!). In this case, we’ll set an auto transition event back and forth between an artboard with a cursor that has an opacity of 100% and an artboard with a cursor that has an opacity of 0%.

FYI: Auto events are only triggered when your mouse is in the Preview box, so when you don’t see anything happen immediately after you create the auto event, that’s why. Just hover your mouse in the Preview box and you’ll be able to see it.

Download the assets.

Download the Principle file.


Download the subtitles for this tutorial (.srt file).