UI Animation: Timing and Easing in Principle

Gil Huybrecht, Ui & UX designer, Branding

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (58m)
    • 1. Intro

      1:06
    • 2. Principle Basics

      3:00
    • 3. Masking

      4:02
    • 4. Timing & easing

      4:44
    • 5. Exercise: Document setup

      18:36
    • 6. Exercise: Expanding menu

      9:34
    • 7. Exercise: Video reveal

      15:47
    • 8. Class project

      0:50
    • 9. Roundup

      0:47
35 students are watching this class

Project Description

Now it’s your turn to make something awesome. Be sure to have all your states of the animation designed, it will help you out a lot to think about how you’re gonna work from the beginning. Also think about how you want a user to feel when they would see your animation. If it’s a website for a spa you want it to be very calming for example. Post your different states of your animations and your final animation here in the class project and i’ll check them out and give you guys some feedback.

If you guys have no idea for a design for your animation i highly recommend checking out my previous class here on Skillshare. I cover the design part over there. I’m looking forward to what you guys are gonna come up wit. And remember heave fun with it!

Resources(1)

Student Projects