mui-jackinbox
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Mui-JackinBox

A Material-UI component that wraps animate.css

Installation

npm install mui-jackinbox --save

or

yarn add mui-jackinbox

Demo

See the demo to get moving today:

link here

Reference

Component Props

Prop Type Options Default Description
name string see below empty Animation Name
animate boolean truthy | falsy true Begin animate
hideUntilAnimate boolean truthy | falsy false Should hide element until animate evaluates true
noDisplayUntilAnimate boolean truthy | falsy false Element will not display until animate evaluates true
hideAfterAnimate boolean truthy | falsy false Should hide element after animation ends
noDisplayAfterAnimate boolean truthy | falsy false Element will not display after animation ends
speed string slower | slow | fast | faster undefined Animation speed. A null value will result in "normal" speed, or 1s. Default speeds are 3s when slower, 2s when slow, 800ms when fast, and 500ms when faster.
delay boolean | number truthy | falsy | 1 | 2 | 3 | 4 | 5 false Delay the animation start. A number used here represents a delay in seconds. A truthy value will result in a 1 second delay. A falsy value equates to no delay.
repeat boolean | number truthy | falsy | 1 | 2 | 3 false Repeat the animation. A number used here represents the number of repetitions. A truthy value will result in a single repetition. A falsy value equates to no repetition.
infinite boolean truthy | falsy false Repeat animation indefinitely.
speedBy string 1s, ... 1s Factor speed by an interval. Ex. <JackinBox name="fadeIn" speed="slow" speedBy="2s" /> would yield a 4 second animation.
delayBy string 1s, ... 1s Factor delay by an interval. Ex. <JackinBox name="fadeIn" delay={2} delayBy="2s" /> would yield a 4 second delay prior to animation.
repeatBy string 1s, ... 1s Factor repeat by an interval. Ex. <JackinBox name="fadeIn" repeat={2} repeatBy={2} /> would yield a animation that is repeated 4 additional times.
onAnimationStart function ... undefined A function to run once animation begins.
onAnimationEnd function ... undefined A function to run once animation ends.
prefix string css prefix animate__ Change css prefix. Untested.

Animation Names

bounce | flash | pulse | rubberBand | shakeX | shakeY | headShake | swing | tada | wobble | jello | heartBeat | backInDown | backInLeft | backInRight | backInUp | backOutDown | backOutLeft | backOutRight | backOutUp | bounceIn | bounceInDown | bounceInLeft | bounceInRight | bounceInUp | bounceOut | bounceOutDown | bounceOutLeft | bounceOutRight | bounceOutUp | fadeIn | fadeInDown | fadeInDownBig | fadeInLeft | fadeInLeftBig | fadeInRight | fadeInRightBig | fadeInUp | fadeInUpBig | fadeInTopLeft | fadeInTopRight | fadeInBottomLeft | fadeInBottomRight | fadeOut | fadeOutDown | fadeOutDownBig | fadeOutLeft | fadeOutLeftBig | fadeOutRight | fadeOutRightBig | fadeOutUp | fadeOutUpBig | fadeOutTopLeft | fadeOutTopRight | fadeOutBottomRight | fadeOutBottomLeft | flip | flipInX | flipInY | flipOutX | flipOutY | lightSpeedInRight | lightSpeedInLeft | lightSpeedOutRight | lightSpeedOutLeft | rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft | rotateInUpRight | rotateOut | rotateOutDownLeft | rotateOutDownRight | rotateOutUpLeft | rotateOutUpRight | hinge | jackInTheBox | rollIn | rollOut | zoomIn | zoomInDown | zoomInLeft | zoomInRight | zoomInUp | zoomOut | zoomOutDown | zoomOutLeft | zoomOutRight | zoomOutUp | slideInDown | slideInLeft | slideInRight | slideInUp | slideOutDown | slideOutLeft | slideOutRight | slideOutUp

Package Sidebar

Install

npm i mui-jackinbox

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

38 kB

Total Files

16

Last publish

Collaborators

  • kevinmoe