react-reveal
Version:
Really simple way to add reveal on scroll animation to your React app.
1 lines • 2.08 kB
JavaScript
"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _objectWithoutProperties(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}function HamburgerIcon(e,t,r){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{color:"#fff",size:28,style:{backgroundColor:"#808080"}},n=o.color,a=void 0===n?"#fff":n,i=o.size,s=void 0===i?28:i,l=o.style,c=_objectWithoutProperties(o,["color","size","style"]),d={opacity:1,stroke:a,transition:"transform 0.3s"},f={cursor:"pointer",animationName:e?t("\n 15% {\n opacity: 0.8;\n transform: translateZ(0) scale(0.8) rotateZ(0);\n }\n 30% {\n transform: translateZ(0) scale(0.8) rotateZ(0);\n }\n 100% {\n opacity: 1;\n transform: translateZ(0) scale(1) rotateZ(405deg);\n }\n "):void 0,animationDuration:e?"900ms":void 0,animationFillMode:e?"forwards":void 0},u=_extends({},d,{transform:e?"translate(0, 7px)":void 0}),p=_extends({},d,{transform:e?"translate(20px, -4px) rotate(90deg)":"rotate(0deg)"}),x=_extends({},d,{transform:e?"translate(0, -7px)":void 0});return _react2.default.createElement("div",_extends({style:_extends({},l,{width:s,height:s})},c,{onClick:r}),_react2.default.createElement("svg",{style:f,width:s,height:s,id:"hamburger",viewBox:"-4 0 32 16"},_react2.default.createElement("line",{style:u,fill:"none",stroke:a,strokeWidth:"2",x1:"0",y1:"1",x2:"24",y2:"1"}),_react2.default.createElement("line",{style:p,fill:"none",stroke:a,strokeWidth:"2",x1:"0",y1:"8",x2:"24",y2:"8"}),_react2.default.createElement("line",{style:x,fill:"none",stroke:a,strokeWidth:"2",x1:"0",y1:"15",x2:"24",y2:"15"})))}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_react=require("react"),_react2=_interopRequireDefault(_react);exports.default=HamburgerIcon,module.exports=exports.default;