Skip to content
🚴 Animate specification and components of Ant Design
Branch: master
Clone or download
Latest commit b02a568 May 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml May 27, 2019
components add banner-anim translation Feb 25, 2019
exhibition update linked animate Mar 4, 2019
language doc basic translation Mar 8, 2019
site fix typo Mar 15, 2019
.editorconfig add web framework Feb 22, 2016
.eslintignore update bisheng Feb 15, 2019
.eslintrc.js update bisheng Feb 15, 2019
.gitignore update react and fix lint Oct 18, 2017
.stylelintrc update bisheng Feb 15, 2019
CNAME add CNAME May 23, 2019
LICENSE.md Create LICENSE.md Dec 22, 2016
README.cn.md add edit downline announcement Nov 7, 2018
README.md Update README.md Dec 6, 2018
package.json add CNAME May 23, 2019
renovate.json Add renovate.json May 20, 2019
theme.js use babel-plugin-impurt load antd Jan 4, 2017
webpack.config.js update bisheng Feb 15, 2019

README.md

Ant Motion

Animation specification and components of Ant Design.

Dependencies DevDependencies

What is Ant Motion?

Ant Motion is a motion design specification from Ant Design, and also provide a complete solution with lots of out-of-box animations for your React applications.

What can Ant Motion do?

  • Create neat animations by using React components with a simple configuration.
  • Create beautiful landing page with motions by a few steps.

Demos

Specification

Ant Motion is an abstraction interface mainly intended to enhance the comfortness in the UX, increase the UI vitality, and also describe the level of relationship among touch feedback, user intentions and other functional effects. View details

Animation Components

  • rc-tween-one

    This is a React wrapper to animate your components. You can perform all of the style animations, including transform3d, fuzzy and other effects, you can also complete the Bezier curve animation. For the specific parameters see the API

  • rc-animate

    On a single element according to the status of animation display hidden, need to combine css or other third-party animation class used together; for the specific parameters see API

  • rc-queue-anim

    Add a serial rendering approach to a group of elements. Refer to the API for the specific parameters.

  • rc-scroll-anim

    Through a simple configuration, you can add animations which follow the scollbar on the elements of the page. Refer to the API for the specific parameters.

  • rc-banner-anim

    With a simple configuration, you can set up a modern and professional banner slider. Refer to the API for the specific parameters.

Landing page solution

Landing Formally launched, more. 🎉🎉🎉

This is based on the Ant Motion React components to follow with the design specifications of Ant Design to complete the demo page, you can quickly and flexibly configure the page template you want.

It provides a single-element example and a full-page example after configuration.

ant-motion-dva-cli-example

umi-example

More details

Develop

npm install
npm start

Go to http://localhost:8111

You can’t perform that action at this time.