React Motions
Compose React Animations using High-Order Functions or Components
React-Motions is a mix of ideas from Recompose and Animate.css. In fact, react-motions is a set of pure functions entirely based on animation purpose.
yarn add react-motions --dev Usage
Using HOF
import { withBounce, withShake, withInfinite, withSequence } from 'react-motions' const Component = <div>How can I look beautiful</div> const ComponentWithShake = withShake(Component) const ComponentWithShakeAndBounce = withShake(withBounce(Component)) const ComponentWithInfiniteBounce = withInfinite(withBounce(Component)) const ComponentWithShakeThenBounce = withSequence(withShake(withBounce(Component)))HOF - Based on Compositions
You can add compose animations (even custom animations) based on functions. Here is an example:
import { withShake, withFadeOut, withInfine } from 'react-motions' const Component = () => ( withInfinite( withFadeOut( withInfinite( withShake( <h2>Bouncing and Fading Out infinitely!!</h2> ) ) ) ) )Using Components
import { Bounce, Shake } from 'react-motions' const ComponentWithShake = () => ( <Shake duration={4}> <div>How can I look beautiful</div> </Shake> ) const ComponentWithBounce = () => ( <Bounce infinite> <div>How can I look beautiful</div> </Bounce> )React-Motions was created to be agnostic to the renderer:
| React Renderer | Available for use | Version |
|---|---|---|
| React-DOM | ^16 | |
| React-Native | ||
| React-TV | ^0.3 |
API
withInfinite
Set last animation with infinity property.
import { withInfinite, withBounce } from 'react-motions' const DoNotStopBouncing = withInfinite(withBounce(<div>Let's bounce without stop!</div>))withSequence
Execute next animation only after previous animation be finished.
import { withSequence, withShake, withJello } from 'react-motions' const SequencialAnimations = withSequence( withShake, withJello, <div>First shake it then jello! </div> )compose
Execute all animations in the same time.
import { compose, withFlash, withPulse } from 'react-motions' const VividAnimation = compose( withFlash, withPulse, <div>Flash and Pulse!</div> )Bounce
Component
Render a React Component with Bounce animation (2s duration and iterationCount infinite)
import { Bounce } from 'react-motions' const ComponentBounce = ( <Bounce duration={2} infinite> Let's bounce here </Bounce> )Function
Return a React Component with Bounce animation (1s duration)
import { withBounce } from 'react-motions' const ComponentWithBounce = withBounce(<div>Let's bounce here</div>)FadeIn
Component
Render a React Component with FadeIn animation (2s duration and iterationCount infinite)
import { FadeIn } from 'react-motions' const ComponentFadeIn = ( <FadeIn duration={2} infinite> Let's fadeIn here </FadeIn> )Function
Return a React Component with FadeIn animation (1s duration)
import { withFadeIn } from 'react-motions' const ComponentWithFadeIn = withFadeIn(<div>Let's fadeIn here</div>)FadeOut
Component
Render a React Component with FadeOut animation (2s duration and iterationCount infinite)
import { FadeOut } from 'react-motions' const ComponentFadeOut = ( <FadeOut duration={2} infinite> Let's fadeOut here </FadeOut> )Function
Return a React Component with FadeOut animation (1s duration)
import { withFadeOut } from 'react-motions' const ComponentWithFadeOut = withFadeOut(<div>fadeOut here</div>)Flash
Component
Render a React Component with Flash animation (2s duration and iterationCount infinite)
import { Flash } from 'react-motions' const ComponentFlash = ( <Flash duration={2} infinite> Let's flash here </Flash> )Function
Return a React Component with Flash animation (1s duration)
import { withFlash } from 'react-motions' const ComponentWithFlash = withFlash(<div>Flash! Flash!</div>)Jello
Component
Render a React Component with Jello animation (2s duration and iterationCount infinite)
import { Jello } from 'react-motions' const ComponentJello = ( <Jello duration={2} infinite> Let's jello here </Jello> )Function
Return a React Component with Jello animation (1s duration)
import { withJello } from 'react-motions' const ComponentWithJello = withJello(<div>Jelloooool</div>)Pulse
Component
Render a React Component with Pulse animation (2s duration and iterationCount infinite)
import { Pulse } from 'react-motions' const ComponentPulse = ( <Pulse duration={2} infinite> Let's pulse here </Pulse> )Function
Return a React Component with Pulse animation (1s duration)
import { withPulse } from 'react-motions' const ComponentWithPulse = withPulse(<div>Let's pulse here</div>)RubberBand
Component
Render a React Component with RubberBand animation (2s duration and iterationCount infinite)
import { RubberBand } from 'react-motions' const ComponentRubberBand = ( <RubberBand duration={2} infinite> Let's rubberBand here </RubberBand> )Function
Return a React Component with rubberBand animation (1s duration)
import { withRubberBand } from 'react-motions' const ComponentWithRubberBand = withRubberBand(<div>rubberBand!</div>)Shake
Component
Render a React Component with Shake animation (2s duration and iterationCount infinite)
import { Shake } from 'react-motions' const ComponentShake = ( <Shake duration={2} infinite> Let's shake here </Shake> )Function
Return a React Component with Shake animation (1s duration)
import { withShake } from 'react-motions' const ComponentWithShake = withShake(<div>Let's shake here</div>)Swing
Component
Render a React Component with Swing animation (2s duration and iterationCount infinite)
import { Swing } from 'react-motions' const ComponentSwing = ( <Swing duration={2} infinite> Let's swing here </Swing> )Function
Return a React Component with Swing animation (1s duration)
import { withSwing } from 'react-motions' const ComponentWithSwing = withSwing(<div>Swing!</div>)Tada
Component
Render a React Component with Tada animation (2s duration and iterationCount infinite)
import { Tada } from 'react-motions' const ComponentTada = ( <Tada duration={2} infinite> Let's tada here </Tada> )Function
Return a React Component with Tada animation (1s duration)
import { withTada } from 'react-motions' const ComponentWithTada = withTada(<div>Tadaaaan!</div>)Wobble
Component
Render a React Component with Wobble animation (2s duration and iterationCount infinite)
import { Wobble } from 'react-motions' const ComponentWobble = ( <Wobble duration={2} infinite> Let's wobble here </Wobble> )Function
Return a React Component with Wobble animation (1s duration)
import { withWobble } from 'react-motions' const ComponentWithWobble = withWobble(<div>Wobble!</div>)Roadmap
-
withSequence -
compose - Create handler props on Components for bind Animation Hooks
- Allows to configure animation property on HOC
Credits
A thanks to Animate.css for all animations.
Created by Raphael Amorim.
