Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing

Smart Components

Social App
Music Player
To Do App

Magic Motion

Photo View
Tab Navigation
Card List
Mobile Carousel
Floating Action Button
Dynamic Grid
Expandable Menu
Image Gallery
Image Gallery 2
Magic Motion
Reels: Drag
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Window
Side Menu

Components

Input Form
Loading Indicator
Radio Buttons
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Carousel Design
Drop on Scroll
Image Panning
Input Data
Input Validation
Like Animation
Press-And-Hold
Nested Scroll
Progress Bar Design
Show Password
Star Rating
Stories: Tap
Swipe Menu
Switch Sheet
Menu Tab
Toast Prompt
Wheel Picker

Effects

Cover Flow
3D Carousel
Flip Animation
Parallax Effect
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Custom Effect
Drag Handle
Dynamic Header
Like Counter
Scroll Progress
Slider

Timeout Transition

Open in Framer to interactPreview this example

Create automatic timeout transitions by using the Loading Indicator component from the insert menu.

Open in FramerPreview Example

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.)

Resources
  • Splash Screen
  • Progress Bar Design
  • Talk about this on Discord

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement