Questions tagged [animation]

movement of elements on a screen that can help solidify their relationship, create a visual appeal or rearrange/remove controls or information presented visually

Filter by
Sorted by
Tagged with
1 vote
2 answers
56 views

How to do loading animations when at certain times the application is too fast for them?

I am facing a strange "catch-22" like problem, while developing an application for a mobile browser. My problem is that, some inner-app screens are fetching data from a back-end server, and ...
user avatar
3 votes
2 answers
740 views

Mobile ui design - Scrolling effect to hide navbar and show it on scroll up

I am looking for examples of the effect used mostly in mobile design, where by scrolling down the navbar hides from view, and by scrolling up again it returns in view. Does this effect have a specific ...
user avatar
  • 477
0 votes
1 answer
44 views

Removing an item from Favorites

I'm building an application with 2 pages: Favorites and Browse. I have an Add to Favorites button (a star icon that fills or unfills when the user clicks on it). When a user clicks to remove an item ...
user avatar
1 vote
0 answers
44 views

What's the name of the header shrinking animation in Samsung's One UI

I'm curious about the name of this behavior, I remember reading it in a design blog a few months ago but completely forgot about it, algo OnePlus implemented something similar in OxygenOS 11 and ...
user avatar
1 vote
1 answer
106 views

Nested sidebar behavior

I have a nested sidebar that goes 3 levels deep. I would like the interaction to slide left/right: So in this example, if you click on "Jobs" in (1), (2) would then slide in. My question is,...
user avatar
  • 1,062
3 votes
1 answer
176 views

Should we animate tab switching?

I opened up a feature request for Windows Terminal to talk about adding some form of animation when doing tab switching between fields. The most common pattern is to make the transition instant. ...
user avatar
2 votes
2 answers
85 views

Is it a good choice to use a more complex animation for loadings?

Currently for a loading animation I use an animated gif (imagine like a wave rotating on itself, which is inherent to theme of the app), instead of a classical loading animation. The thing is that I ...
user avatar
0 votes
1 answer
43 views

What is the keyword for this effect: an animated person walks out from the bottom right corner of a website?

What is the keyword for this effect: an animated person walks out from the bottom right corner of a website? Better yet, any link to any provider that still exists today? Anybody know this may feel ...
user avatar
  • 245
0 votes
1 answer
131 views

What is the best ease curve and speed for color transitions?

I am creating a desktop app, and I'm currently implementing animations. I understand from Material Design Guidelines that I should set the speed for transitions for desktop apps at about 100-250 ms to ...
user avatar
3 votes
1 answer
139 views

Gesture driven interfaces and hint animations - good or bad?

Many times I saw statements that "Interface/design you need to explain is a bad design". I do agree with it (e.g. if you have nav bar then having labels under/next to icons is beneficial), ...
user avatar
18 votes
2 answers
6k views

YouTube Premiere countdown animation

YouTube has a feature called Premiere that allows creators to publish videos so that they are premiered live, at a particular time, to all viewers. At the beginning of each premiere is a 2 minute ...
user avatar
1 vote
2 answers
597 views

Why are websites so poor in terms of transition & animation compared to native apps?

It's 2020 and web standards allow for really powerfull animations. Compatibility is barely an issue since most browsers are evergreen and most devices are powerfull enough. On top of that, it's easy ...
user avatar
  • 113
3 votes
3 answers
220 views

What should happen when deleting a table?

Let's say we have a table with 10-50 rows, and 3 column each. Below the table we have a button like empty table, which removes all the rows from it. After the click happens, what do you think should ...
user avatar
  • 185
0 votes
1 answer
120 views

Too many loading indicator on a single web page

I was assigned to design a web page, which has a lot of control buttons. Each button requires an activity indicator, to tell the user that the corresponding action is in process. There are some ...
user avatar
1 vote
1 answer
84 views

Need help for finding a user-friendly item queue component layout and presentation

I'm looking for alternate layout/UX ideas for presenting an item queue component. The data and behavior I'm to present is a linear queue, a stack of items -- digits, letters, small images. A ...
user avatar
3 votes
1 answer
266 views

Animation and gamification

I'm trying to add a few animations to my application targeted towards teens, specifically animations that increase user engagement. Similar to how twitter introduced the heart animation.. it's ...
user avatar
  • 299
1 vote
1 answer
69 views

Validation of a text file: how to best show the inline editor?

I'm making an app that validates a text file and then shows the errors associated with it. Currently all errors are listed as rows. I'd like to make it easy to correct the errors in the text file so ...
user avatar
2 votes
4 answers
2k views

Should the sun rise from left or right side?

I'm making a widget for a strategy game that displays the sun in its background and you can see it rising, moving across the widget and setting as time passes. The sun rises from the east, on the ...
user avatar
  • 123
0 votes
1 answer
87 views

Micro Transition for selection

I'm using a dropdown select in my design. The user makes a selection, and the content below changes. The problem is the content below is very similar and isn't obvious that it has changed. I was ...
user avatar
2 votes
1 answer
73 views

How long should I wait before animating the navigation bar in/out when the user scrolls?

I'm currently working on a new design for a site and I've encountered a problem I've never found before. I want to collapse the navigation bar up when the user scrolls down to increase available real ...
user avatar
  • 21
3 votes
2 answers
804 views

How to handoff animation for iOS developers? [closed]

I'm a designer and interested in different ways I can handoff animation to iOS developers and the best ways to do that depending on a particular case. 1. JSON I know Lottie works best for animating ...
user avatar
  • 933
1 vote
4 answers
158 views

Progress indicator position in iOS [closed]

Having a little bit of struggle while designing a iOS app. What do you think is the right position for progress indicator - right or left side of text? Checking for updates... or Checking for ...
user avatar
  • 41
2 votes
1 answer
344 views

Pulsing to grab attention

I want to know what you guys think about a pulsing animation to grab attention to know about the advantages to login. The idea is having a circle pulsing and when the user makes hover it shows a ...
user avatar
2 votes
1 answer
82 views

Use top-looking arrow when navigate between screens [closed]

When I was designing something in Adobe XD I thought about an icon which will display in search bar to go backwards in app. My activity uses slide up to open another activity with search bar. Let me ...
user avatar
1 vote
2 answers
52 views

how frequently should numbers refresh on an exercise machine?

I'm building an application that runs on a tablet connected to an exercise machine (a rowing machine)> The tablet is running a video of the instructor, and overlaying the video is the performance of ...
user avatar
  • 203
4 votes
4 answers
448 views

What's the purpose of a "Pause Animation" button on a loading animation?

Many of the loading spinners on Chase bank's rewards portal have a "Pause Animation" button below them. Is there a reason to include this below animations?
user avatar
  • 41
1 vote
1 answer
44 views

Displaying acronyms

I'm working on a website for a student society. The society has been established for a good number of years now, and in its humble beginnings it was known by an acronym. For the purpose of this ...
user avatar
5 votes
3 answers
716 views

How long should a loading spinner take to do one rotation?

Whilst I'd always prefer an estimated time, I get that's not always possible, so we fall back to the tried and personally hated, loading spinner. I've always thought that having it do one iteration ...
user avatar
  • 153
1 vote
1 answer
363 views

Microinteraction and transition are same?

During my last presentation on transition/animation, it was asked that "are microinteraction and transition same?" I said no but could not back my answer. Could someone please explain.
user avatar
1 vote
1 answer
785 views

Best method of showcasing UI interaction / animations for case studies or portfolios?

I'm building a site full of case studies and I want the ability to show UI animations of how the user interacts with the interface. My app is a browser based app. Some simple things I'd like to show: ...
user avatar
  • 13
1 vote
1 answer
155 views

What is a good duration time for UI animations?

To minimize initial cognitive load, we plan to hide dependent fields within our software by adding animation to show / hide them when called. I have been looking for articles on duration timing on ...
user avatar
  • 493
0 votes
1 answer
83 views

Should additional animations be shown *after* the first app-app transition?

On a new iOS device, when I try to open a special URL (app URL, universal link, or phone number), iOS will ask me if I want to "Open in X app" When this occurs, a visual animation occurs that ...
user avatar
3 votes
3 answers
396 views

MockUps - Prototyping UI using After Effects. Is it worth it? [closed]

I am a visual Designer and currently work as a UI_UX designer at the company I work for. I wanted to ask my colleagues here and front-end Devs as well your opinion about presenting After Effects ...
user avatar
0 votes
1 answer
85 views

How are hero animations done? [closed]

An example could be seen on Valueact website. I need some direction as to how this is implemented.
user avatar
4 votes
2 answers
374 views

Best practice for prototyping and making motion animations for iOS and android [closed]

I am currently working on redesign on for both android and iOS. I wanted to use small animations and feel confident that I can prototype them using principle, flinto or after effects. However how can ...
user avatar
  • 431
2 votes
1 answer
394 views

What are main disadvantages of decorative animation and when it is a good use and when it is not?

What are main disadvantages of user interface animation and, in particular, of decorative animation, and how to keep a balance in the UI? As introduction, I think the animations are an useful tool ...
user avatar
2 votes
1 answer
125 views

Card-swipe based interface for macOS: Human Interface Guidelines

I was looking towards creating an app for solving an issue I've had with quickly sorting files. The interface would be similar to Tinder's but for files (images, system files etcetera). Reading ...
user avatar
  • 21
1 vote
1 answer
81 views

Can using animation positively lengthen the user journey

When users use an app or a website, different levels of effort and cognitive load are needed at each point of the user journey. While various negative factors cause bad UX can potentially shorten a ...
user avatar
  • 10.5k
0 votes
1 answer
234 views

How fast is too fast? [closed]

Users like apps to be fast. Many apps use animations to "smooth" the experience. If an animations are too slow, the app feels...well, slow. But if the animations are too fast, they may be so fast that ...
user avatar
  • 781
4 votes
2 answers
768 views

Element transition between tabs

I'm building an app that in one of its screens has 2 tabs. In each tab there is a list of elements (cards), and i'm wondering : What type of transition between tabs should i use? Is there a ...
user avatar
  • 1,201
4 votes
2 answers
245 views

What’s the point of the fadeUp animations on website landing pages?

Recently, I’ve been noticing a lot of website homepage’s using fadeUp animations on the page content. Spotify’s homepage is a good example. I’m curious to know why they do this. To me, it seems ...
user avatar
93 votes
7 answers
18k views

Why are animations out often neglected, even from Google?

Animation-In are fine BUT no animation when something disappears. IS THIS GOOD? From Google images From Toptal https://www.toptal.com/designers/ux/interview-questions From Designation http://...
user avatar
  • 3,678
0 votes
2 answers
1k views

Is there a name for this loading animation?

I can notice this animation looks like an default pattern, because I've seen it at so many apps and websites. I would like to know what's the name of it but I can't find any results.
user avatar
  • 161
10 votes
5 answers
5k views

Is it a good idea to show progress indicator inside a button?

Typical examples: Ladda UI for Bootstrap 3. Crazier examples: Progress Button Styles. This is for a desktop app, if it matters. Consider that the target view has about three different buttons. The ...
user avatar
  • 277
1 vote
1 answer
77 views

What are the variables needed for describing Friction, Elasticity, magnetism interactions in a UI

Preparing specs for developers of 'pull to refresh' and flick gestures. I'm trying to figure out how to spec these out. Compared to defining normal animations like movement with time and distance this ...
user avatar
  • 10.5k
7 votes
3 answers
332 views

Do users understand "Shake to say no" animations?

It seems to be more prevalent recently that a form or action that is deemed invalid will respond by shaking in horizontal "no" like animation. A simple example seen here: or: This can be ...
user avatar
  • 15.1k
2 votes
1 answer
358 views

What software would most commonly be used to create this UI animation from dribbble? [closed]

I wonder what software is commonly used to create this kind of UI animations. Click on the links below to see them in action (note that due to stackexchange.com, limitation I cannot show animated ...
user avatar
  • 123
2 votes
0 answers
591 views

Gif Animation Progress Bar for Windows 10 Desktop behaviour [closed]

I am designing a native application which pushes windows bundles to Windows 10 desktop. Once the bundles are pushed from the native application you can install them on your desktop. I need to give ...
user avatar
1 vote
2 answers
604 views

Delete picture from thumbnail

I have a little camera icon on the side of a view, for a mobile app. Right now, tapping the camera allows me to load a picture. After the picture is chosen, it replaces the camera icon as a little ...
user avatar
  • 235
4 votes
2 answers
17k views

What is the optimal frame rate for an animated GIF (video like experience)?

We would like to transform video files to animated GIFs, and still provide a "video like" experience with the least possible GIF size. Maximum GIF width is 600px and total size shouldn't be larger ...
user avatar