Charles LiuInstagram

You need a really sharp eye to notice some of these but i swear they make a…

0:54English(auto-generated)4 segments135 words, 1 min read

Search inside any video

SavedThat transcribes your saved videos and lets you search across all of them instantly. Save this video and find any moment.

TL;DR

Learn essential tips for smooth UI transitions, including timing, scaling, and movement techniques for better user experience.

UI transition techniquesease out animationsbutton scaling tipsobject movement arcsUI design best practicespopover transition methodsanimation timing strategiesuser interface animations

Chapters

  1. 0:00UI Transition Basics
    01
  2. 0:05Ease Out for Entrances
    02
  3. 0:10Timing for Drop Downs
    03
  4. 0:20Scaling Buttons on Press
    04
  5. 0:30Movement Techniques
    05
  6. 0:40Using Masks for Reveals
    06
  7. 0:50Final Tips
    07

Transcript

0:00

Use ease out for entrances. Keep drop downs at 150 to 250 ms. Stagger list rows by 30 ms. Scale buttons to 0.97 on press. Stretch moving knobs by 12%. Stagger when details settle. Use arcs for object movement. Use a pulse to confirm success. Use ease in out for on-screen

0:20

movements. Start popovers at scale 0.95. Transition in from the trigger, not from the center. Transition out to the trigger. Don't fade into the center. Don't use spring bounds for everyday UI transitions. Don't tween a handheld animation. Make exits about 20% shorter than

0:39

entrances. Bring the new state in as the old state leaps. Use masks for reveals and color changes. Crossfade icons with scale and blur. Rubber band past drag boundaries. Reuse the same layout ID across shared objects. Follow for more.

0:50

same layout ID across shared objects. Follow for more.

Are you the creator or rights holder of this video? Request removal of this transcript.

Related Transcripts

Never lose a moment again

Save videos from YouTube, Instagram, and TikTok. Search everything that was said, and jump to the second.

Start Saving Videos - Free Trial