ant-design/docs/spec/motion.en-US.md

order	title
4	Motion

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:

import { Col, Row } from 'antd';

const text = [
  { title: 'Natural', img: 'https://gw.alipayobjects.com/zos/rmsportal/LyTPSGknLUlxiVdwMWyu.gif', content: 'The animation should based on law of nature. This assures the animation is smooth by its nature and intuitive to its users.' },
  { title: 'Performant', img: 'https://gw.alipayobjects.com/zos/rmsportal/SQOZVQVIossbXpzDmihu.gif', content: 'The animation should have a transition time as minimal as possible so that it serves its purpose in the most effective way.' },
  { title: 'Concise', img: 'https://gw.alipayobjects.com/zos/rmsportal/OkIXkscKxywYLSrilPIf.gif', content: 'The animation should be meaningful and justified. An over fancy animation will frustrate its users, and therefore should always be avoided.' },
];

function Principle() {
  const childrenToRender = text.map(item => (
    <Col key={item.title} sm={24} md={8} >
      <div className="principle">
        <div><img src={item.img} width="80%" /></div>
        <h4>{item.title}</h4>
        <p>{item.content}</p>
      </div>
    </Col>
  ));
  return (
    <div className="motion-principle-wrapper">
      <Row gutter={{ md: 32, sm: 0 }} className="principle-wrapper">
        {childrenToRender}
      </Row>
    </div>
  );
}

ReactDOM.render(<Principle />, mountNode);

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.