react-scroll-effects/dist/scrollEffects.min.js

React component to animate elements on scroll with animate.css

"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),_get=function(e,t,n){for(var o=!0;o;){var r=e,a=t,i=n;o=!1,null===r&&(r=Function.prototype);var s=Object.getOwnPropertyDescriptor(r,a);if(void 0!==s){if("value"in s)return s.value;var l=s.get;if(void 0===l)return;return l.call(i)}var u=Object.getPrototypeOf(r);if(null===u)return;e=u,t=a,n=i,o=!0,s=u=void 0}},_react=require("react"),_react2=_interopRequireDefault(_react),_lodashThrottle=require("lodash.throttle"),_lodashThrottle2=_interopRequireDefault(_lodashThrottle),_classnames=require("classnames"),_classnames2=_interopRequireDefault(_classnames),ScrollEffect=function(e){function t(){_classCallCheck(this,t),_get(Object.getPrototypeOf(t.prototype),"constructor",this).call(this),this.state={animated:!1},window&&window.addEventListener&&window.addEventListener("scroll",(0,_lodashThrottle2.default)(this.handleScroll.bind(this),200))}return _inherits(t,e),_createClass(t,null,[{key:"posTop",value:function(){return void 0!==window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop?document.body.scrollTop:0}}]),_createClass(t,[{key:"componentDidMount",value:function(){this.handleScroll()}},{key:"componentWillUnmount",value:function(){window&&window.addEventListener&&window.removeEventListener("scroll",this.handleScroll.bind(this))}},{key:"singleAnimate",value:function(){var e=this;this.setState({animated:!0}),setTimeout(function(){e.props.callback()},1e3*this.props.duration)}},{key:"queueAnimate",value:function(){var e=this,t=this.node,n=function(t){return t.className===e.props.queueClass},o=0,r=function(t){var n=t;n.style.visibility="hidden",setTimeout(function(){n.style.visibility="visible",n.className=n.className+" animated "+e.props.animate},o*(1e3*e.props.queueDuration)),o+=1};(function e(t){Array.prototype.forEach.call(t.childNodes,function(t){e(t),n(t)&&r(t)})})(t),setTimeout(function(){e.props.callback()},1e3*this.props.duration*o)}},{key:"handleScroll",value:function(){if(!this.state.animated){var e=this.node,n=t.posTop(),o=e.getBoundingClientRect().top+n;(window.scrollY?window.scrollY:window.pageYOffset)+window.innerHeight>=o+1*this.props.offset&&(this.setState({animated:!0}),this.props.queueClass&&this.queueAnimate(),this.props.callback&&this.singleAnimate())}}},{key:"render",value:function(){var e=this,t=this.props,n=this.state,o=(0,_classnames2.default)(_defineProperty({animated:!0},t.animate,n.animated&&""===t.queueClass));o+=" "+t.className;var r=n.animated?{}:{visibility:"hidden"};return""!==t.duration&&(r.WebkitAnimationDuration=t.duration+"s",r.animationDuration=t.duration+"s"),_react2.default.createElement("div",{className:o,style:_extends({style:r},t.style),ref:function(t){e.node=t}},t.children)}}]),t}(_react.Component);exports.default=ScrollEffect,ScrollEffect.defaultProps={animate:"fadeInUp",offset:100,className:"",duration:1,queueDuration:1,queueClass:"",callback:function(){}},ScrollEffect.propTypes={animate:_react.PropTypes.string,callback:_react.PropTypes.func,duration:_react.PropTypes.number,offset:_react.PropTypes.number,queueClass:_react.PropTypes.string,queueDuration:_react.PropTypes.number},module.exports=exports.default;