react-reveal/Stepper.js

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

"use strict";function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function t(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}}(),_Step=require("./Step"),_Step2=_interopRequireDefault(_Step),Stepper=function(){function t(){_classCallCheck(this,t),this.steps=[],this.stepMap={},this.hasStarted=!1,this.isTriggered=!1,this.runs=1,this.totalRuns=0,this.start=this.start.bind(this),this.next=this.next.bind(this)}return _createClass(t,[{key:"step",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1e3,i=new _Step2.default(t,e);return i.start=this.start,i.index=this.steps.push(i)-1,this.stepMap[t]=i,this}},{key:"is",value:function(t){return this.get(t)}},{key:"get",value:function(t){if(t in this.stepMap)return this.stepMap[t];console.warn("Animation step "+t+" is missing")}},{key:"start",value:function(t){if(this.hasStarted&&(this.runs=2),this.isTriggered)return void(t<this.trigger&&(this.trigger=t));this.isTriggered=!0,this.trigger=t,window.setTimeout(this.init.bind(this),50)}},{key:"init",value:function(){this.hasStarted=!0,this.head=this.trigger,this.tail=0===this.head?this.steps.length-1:this.head-1,this.next()}},{key:"stop",value:function(){this.hasStarted=!1,this.isTriggered=!1}},{key:"next",value:function(){for(var t=!1,e=0,i=this.steps[this.head].chain.length;e<i;e++){var s=this.steps[this.head].chain[e];!s.isShown&&s.start&&s.inViewport()&&(t=!0,delete s.start,s.animate(s.props))}if(this.head===this.tail){if(this.runs--,++this.totalRuns>100)return;if(this.runs<=0)return this.stop()}var r=this.head;this.head++,this.head>=this.steps.length&&(this.head=0),t?window.setTimeout(this.next,this.steps[r].after):this.next()}}]),t}();exports.default=Stepper,module.exports=exports.default;