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