react-reveal/Jello.js

Really simple way to add reveal on scroll animation to your React app.

"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _objectWithoutProperties(e,r){var o={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o}function make(){return name||(name=(0,_globals.animation)(rule))}function Jello(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:_globals.defaults,r=e.children,o=(e.out,e.timeout),n=e.duration,t=void 0===n?_globals.defaults.duration:n,a=e.delay,s=void 0===a?_globals.defaults.delay:a,u=e.count,l=void 0===u?_globals.defaults.count:u,p=e.forever,d=_objectWithoutProperties(e,["children","out","timeout","duration","delay","count","forever"]),i={make:make,duration:void 0===o?t:o,delay:s,forever:p,count:l,style:{animationFillMode:"both"}};return(0,_wrap2.default)(d,i,!1,r,!0)}Object.defineProperty(exports,"__esModule",{value:!0});var _propTypes=require("prop-types"),_wrap=require("./wrap"),_wrap2=_interopRequireDefault(_wrap),_globals=require("./globals"),propTypes={duration:_propTypes.number,timeout:_propTypes.number,delay:_propTypes.number,count:_propTypes.number,forever:_propTypes.bool},rule="\n  from, 11.1%, to {\n    transform: none;\n  }\n\n  22.2% {\n    transform: skewX(-12.5deg) skewY(-12.5deg);\n  }\n\n  33.3% {\n    transform: skewX(6.25deg) skewY(6.25deg);\n  }\n\n  44.4% {\n    transform: skewX(-3.125deg) skewY(-3.125deg);\n  }\n\n  55.5% {\n    transform: skewX(1.5625deg) skewY(1.5625deg);\n  }\n\n  66.6% {\n    transform: skewX(-0.78125deg) skewY(-0.78125deg);\n  }\n\n  77.7% {\n    transform: skewX(0.390625deg) skewY(0.390625deg);\n  }\n\n  88.8% {\n    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n}\n",name=!1;Jello.propTypes=propTypes,exports.default=Jello,module.exports=exports.default;