logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.22.5
  • Ant Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations

Motion

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

Ant Motion is an animation library based on Ant Design's principles. It is more than just a single library, but also an entire React based solution for modern applications. The goal is to help developers to apply animations in their projects with minimal efforts. Ant Motion provides animations with all levels of granularity - from single action to combination of moves.

Animations bring vividness to interfaces and reinforce user experiences.

Values of Animations

  • Smooth interactions - Animations can make user interactions more natural.
  • Bring vividness - Animations can attract users' attention and increase users' motivation to interact by bring more vividness.
  • Define hierarchies - Animations can define elements' hierarchies and logical relationships in the most intuitive way.
  • Provide feedbacks - Animations can reinforce user experiences by providing motional feedbacks.

Effectiveness of Animations

We can determine if an animation is effective or not from the following two aspects：

  • Justified - Is this animation necessary? Does this animation help its users to digest the information? An effective animation should not be redundant.
  • Performant - Is there any frame loss or lag? An effective animation must be smooth, and must not hurt the overall performance of the product.

Principles

Different from animations usage in typical front-office applications, animations in enterprise level applications spend a great amount of efforts on reinforcing user interactions and the effectiveness of those interactions. Therefore, we derived three animation design principles from Ant Design's core design language:

Natural

Intuitive animations usually are backed by law of nature. This requires the animations to be smooth so that their users can feel the animations' motion being justified. A natural animation triggers its users with positive user experiences.

Take button animation as an example, designers image the button as foliage on water - when you press it and release, the leave will slightly go into the water, and then pop back up, creating ripples around itself.

Performant

Enterprise level applications require highly effective user interactions. So is their animation design - with a transition time as minimal as possible.

For example, compared to appearing animations, disappearing animations should not attract too much attention from their users. They just need to be concise and clear. Therefore, disappearing animations are configured to swing out with faster velocity and no disappearing delay between each list items - they disappear all at the same time as one unit.

Concise

Avoid dramatic and complicated animations. A good animation will get the job done instead of frustrating its users.

For example, when a user expands a menu, his main focus is on the menu content, not the direction change of the arrow icon on the right. Therefore, the animation doesn't need to be very complicated and distracting; it changes just enough to indicate the transition.


For more details, please go to Ant Motion Animation Principles.

Natural

The animation should based on law of nature. This assures the animation is smooth by its nature and intuitive to its users.

Performant

The animation should have a transition time as minimal as possible so that it serves its purpose in the most effective way.

Concise

The animation should be meaningful and justified. An over fancy animation will frustrate its users, and therefore should always be avoided.