Timeout Transition

If your app or website ushers its users between various screens or interfaces, you might want to insert loading animations to ease their transition from one state to another. Oftentimes, this involves just having a looping animation to tide over users as elements load.

But what if you want users to wait a specific amount of time before transitioning to the next screen? That’s where timeout transition animations come in.

In some cases, you want to program automatic transitions that take place after a certain amount of time without needing the user to interact with an element.

But unlike a splash screen, where you want a user to focus on a single image, you may simply want to have a loading indicator loop for a set period of time before your session expires.

There are many reasons you might want this feature. Perhaps you want to have better control over the pacing or cadence of your user’s experience with your app. Maybe you want a cool transition delay animation that you want your users to watch for a while before they move on. Whatever the reason, having a timeout transition animation will give you precise command over how your user moves from one screen to the next.

Set a timeout transition on your app with Framer

To set timeout transitions on Framer, all you have to do is go to the Insert menu, select Utility under the Components submenu, and select Loading Indicator.

From there, you can go to the Loading menu and switch the Duration setting to Timeout. Use the Time slider to determine how long you want the session timeout value to be, and select an Animation to run upon timeout. (You can even toggle whether or not you want the animation to fade out.)