rc-motion
Advanced tools
Package description
The rc-motion npm package is a React component library designed to handle animations and transitions in a React application. It provides a simple and powerful way to implement various animations, including entering, leaving, and switching animations with customizable options for timing, easing, and more.
Basic Animation
This code demonstrates how to use rc-motion to create a basic fade-in animation. The `CSSMotion` component is used with the `visible` prop set to true and a `motionName` provided to define the animation type. The children function renders the animated element with the appropriate style and className applied.
{"import React from 'react'; import CSSMotion from 'rc-motion'; function FadeInExample() { return ( <CSSMotion visible={true} motionName='fade'> {({ style, className }) => ( <div style={style} className={className}>Fade In Animation</div> )} </CSSMotion> ); } export default FadeInExample;"}Custom Animation
This example shows how to create a custom slide animation using rc-motion. The `CSSMotion` component is configured with custom functions for `onAppearStart` and `onAppearActive` to control the animation's start and active states, respectively. This allows for more complex animations beyond predefined ones.
{"import React from 'react'; import CSSMotion from 'rc-motion'; function SlideAnimationExample() { return ( <CSSMotion visible={true} motionName='slide' motionAppear={true} onAppearStart={() => ({ height: 0 })} onAppearActive={() => ({ height: 'auto' })} > {({ style, className }) => ( <div style={style} className={className}>Slide Animation</div> )} </CSSMotion> ); } export default SlideAnimationExample;"}react-spring is a spring-physics based animation library for React. It offers a more physics-based approach to animations, providing a natural and realistic feel. Compared to rc-motion, react-spring focuses more on the physics behind the animations and offers a wider range of animation controls.
framer-motion is a comprehensive animation library for React that makes it simple to create complex animations with a more declarative API. It supports gesture animations, SVG animations, and more. While rc-motion is focused on basic enter and leave animations, framer-motion provides a broader set of animation features and is more suited for intricate animation sequences.
Readme
React lifecycle controlled motion library.
https://react-component.github.io/motion/
import CSSMotion from 'rc-motion';
export default ({ visible }) => (
<CSSMotion visible={visible} motionName="my-motion">
{({ className, style }) => <div className={className} style={style} />}
</CSSMotion>
);
| Property | Type | Default | Description |
|---|---|---|---|
| motionName | string | - | Config motion name, will dynamic update when status changed |
| visible | boolean | true | Trigger motion events |
| motionAppear | boolean | true | Use motion when appear |
| motionEnter | boolean | true | Use motion when enter |
| motionLeave | boolean | true | Use motion when leave |
| motionLeaveImmediately | boolean | - | Will trigger leave even on mount |
| motionDeadline | number | - | Trigger motion status change even when motion event not fire |
| removeOnLeave | boolean | true | Remove element when motion leave end |
| leavedClassName | string | - | Set leaved element className |
| onAppearStart | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when appear start, return style will patch to element |
| onEnterStart | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when enter start, return style will patch to element |
| onLeaveStart | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when leave start, return style will patch to element |
| onAppearActive | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when appear active, return style will patch to element |
| onEnterActive | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when enter active, return style will patch to element |
| onLeaveActive | (HTMLElement, Event) => CSSProperties | void; | - | Trigger when leave active, return style will patch to element |
| onAppearEnd | (HTMLElement, Event) => boolean | void; | - | Trigger when appear end, will not finish when return false |
| onEnterEnd | (HTMLElement, Event) => boolean | void; | - | Trigger when enter end, will not finish when return false |
| onLeaveEnd | (HTMLElement, Event) => boolean | void; | - | Trigger when leave end, will not finish when return false |
extends all the props from CSSMotion
| Property | Type | Default | Description |
|---|---|---|---|
| keys | React.Key[] | - | Motion list keys |
| component | string | React.ComponentType | div | wrapper component |
npm install
npm start
rc-motion is released under the MIT license.
FAQs
React lifecycle controlled motion library
The npm package rc-motion receives a total of 1,282,500 weekly downloads. As such, rc-motion popularity was classified as popular.
We found that rc-motion demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.