kryndex / ant-motion

:bicyclist: The react animation solution

Ant Motion

The react animation solution

中文 README

What is Ant Motion?

Ant Motion is a dynamic language powered by Ant Design. It's not only a dynamic language, but it's also a set of solutions that can help developers provide dynamic effects in their React project with minimum effort. We offer a single, combined animation, and a complete solution.

What can Ant Motion do?

You can quickly achieve different animations set using the React JSX syntax with a simple configuration to complete the desired animation.

Animated demos

List animations;

Detailed explanation of the switching effect;

Sortable animated drag and drop list;

Thumbnail expand with details animation;

>> View more;

Dynamic language

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

Dynamic components

rc-tween-one single element dynamic execution component

This is a single JSX tag to create the dynamic 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 single entry and exit components

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 queue entry and exit components

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

rc-scroll-anim follow the scrollbar

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 banner slider effects

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

Home solution

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

>> See details;

Develop

Installation

npm install

Start up：

npm start

Go to http://localhost:8111 。