react-scroll-animator/build/index.js

System for creating animations based on scroll location in react

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.library=e(require("react")):t.library=e(t.react)}(window,function(t){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(e,n){e.exports=t},function(t,e,n){"use strict";n.r(e);var r,o=n(0),i=n.n(o),s=(r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)},function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),c=function(){return(c=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},a=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(n[r[o]]=t[r[o]])}return n},u=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.state={offset:0,scroll:0},e.handleScroll=function(t){e.setState(function(){return{scroll:t.srcElement.body?t.srcElement.body.scrollTop:t.srcElement.scrollTop}})},e}return s(e,t),e.prototype.addScrollListener=function(t){t&&t.onscroll!=this.handleScroll&&(t.onscroll=this.handleScroll,this.setState({offset:t.getBoundingClientRect().top,scroll:t.scrollTop}))},e.prototype.componentWillMount=function(){this.props.elementScroll||document.addEventListener("scroll",this.handleScroll,{passive:!1})},e.prototype.componentWillUnmount=function(){this.props.elementScroll||document.removeEventListener("scroll",this.handleScroll)},e.prototype.render=function(){var t=this,e=this.props,n=e.children,r=e.elementScroll,o=a(e,["children","elementScroll"]);return r?i.a.createElement("div",c({},o,{style:{height:"100%",overflow:"auto",position:"relative"},ref:function(e){return t.addScrollListener(e)}}),n(this.state.scroll,this.state.offset)):n(this.state.scroll,this.state.offset)},e}(o.Component),f=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),l=Object(o.createContext)({getSection:function(){},pageOffset:0}),p=function(t){function e(e){var n=t.call(this,e)||this;return n.largestSectionValues={},n.sectionValues={},n.changingIndex=[0],n.getSection=function(t){return n.normalizedSections.find(function(e){return e.name==t})},n.updateSections(e.sections),n.sectionValues=n.getInitialSectionValues(),n.largestSectionValues=n.getInitialSectionValues(),n}return f(e,t),e.prototype.updateSections=function(t){var e=this,n=this.normalizeSections(t),r=n.sections,o=n.sectionsEnd,i=n.range;this.normalizedSections=r,this.normalizedSectionsSortedEnd=o,this.range=i,this.offsets={},this.normalizedSections.forEach(function(t){e.offsets[t.name+"Offset"]=t.offset})},e.prototype.shouldComponentUpdate=function(t,e){return t.sections!=this.props.sections&&this.updateSections(t.sections),!0},e.prototype.insertSorted=function(t,e,n){t:{for(var r=0;r<t.length;r++)if(n.offset<t[r].offset){t.splice(r,0,n);break t}t.push(n)}t:{for(r=0;r<e.length;r++)if(n.offset+n.range.delta<e[r].offset+e[r].range.delta){e.splice(r,0,n);break t}e.push(n)}},e.prototype.normalizeSection=function(t,e){var n=Object.keys(t)[0],r=t[n],o="number"==typeof r[0]?r[0]:"number"==typeof r?r:document.body.clientHeight,i=r[1]||0,s=o-i;return"offset"in t&&(e+=t.offset),{section:{name:n,index:0,endIndex:0,offset:e,range:{start:o,end:i,delta:s}},offset:e+s}},e.prototype.normalizeParallelSections=function(t,e,n,r){var o=this;return t.reduce(function(t,e){var n=o.normalizeSections(e,r),i=Math.max(n.range,t.range),s=t.sections,c=t.sectionsEnd;return n.sections.forEach(function(t){o.insertSorted(s,c,t)}),{sections:s,sectionsEnd:c,range:i}},{sections:e,sectionsEnd:n,range:0})},e.prototype.normalizeSections=function(t,e){var n=this;void 0===e&&(e=0);var r=t.reduce(function(t,e){if(e instanceof Array)return n.normalizeParallelSections(e,t.sections,t.sectionsEnd,t.range);var r=n.normalizeSection(e,t.range);return n.insertSorted(t.sections,t.sectionsEnd,r.section),{sections:t.sections,sectionsEnd:t.sectionsEnd,range:r.offset}},{sections:[],sectionsEnd:[],range:e});return r.sections.forEach(function(t,e){t.index=e}),r.sectionsEnd.forEach(function(t,e){t.endIndex=e}),r},e.prototype.getInitialSectionValues=function(){var t={};return this.normalizedSections.forEach(function(e){t[e.name]=0}),t},e.prototype.updateSectionValues=function(t){for(var e=0;e<this.changingIndex.length;e++){var n=this.changingIndex[e],r=this.normalizedSections[n],o=t-r.offset,i=r.range.delta,s=Math.min(1,Math.max(0,o)/i);this.sectionValues[r.name]=s,s>this.largestSectionValues[r.name]&&(this.largestSectionValues[r.name]=s);var c=void 0,a=r.endIndex;(c=this.normalizedSectionsSortedEnd[a-1])&&c.offset+c.range.delta>t&&-1==this.changingIndex.indexOf(c.index)&&this.changingIndex.push(c.index),(c=this.normalizedSections[n+1])&&c.offset<t&&-1==this.changingIndex.indexOf(n+1)&&this.changingIndex.push(n+1),o<0&&this.changingIndex.length>1&&this.changingIndex.splice(e--,1),o>i&&this.changingIndex.length>1&&this.changingIndex.splice(e--,1)}return this.sectionValues},e.prototype.renderContent=function(t){var e=this.updateSectionValues(t);return i.a.createElement(l.Provider,{value:{getSection:this.getSection,pageOffset:this.pageOffset}},i.a.createElement("div",{style:{height:this.range+document.body.clientHeight,width:"100%",display:"inline-block"}},this.props.children(e,this.largestSectionValues,this.offsets,t/this.range)))},e.prototype.render=function(){var t=this;return null==this.props.progress?i.a.createElement(u,{elementScroll:this.props.elementScroll},function(e,n){return t.pageOffset=n,t.renderContent(e)}):this.renderContent(this.props.progress*this.range||0)},e}(o.Component);function h(t,e){var n=t.reduce(function(t,e){return t+(1==e?1:0)},0);return n==t.length&&n--,e[n]}var d={linear:function(t){return t},easeInQuad:function(t){return t*t},easeOutQuad:function(t){return t*(2-t)},easeInOutQuad:function(t){return t<.5?2*t*t:(4-2*t)*t-1},easeInCubic:function(t){return t*t*t},easeOutCubic:function(t){return--t*t*t+1},easeInOutCubic:function(t){return t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1},easeInQuart:function(t){return t*t*t*t},easeOutQuart:function(t){return 1- --t*t*t*t},easeInOutQuart:function(t){return t<.5?8*t*t*t*t:1-8*--t*t*t*t},easeInQuint:function(t){return t*t*t*t*t},easeOutQuint:function(t){return 1+--t*t*t*t*t},easeInOutQuint:function(t){return t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t},easeInElastic:function(t){return 0==t?0:(.04-.04/t)*Math.sin(25*t)+1},easeOutElastic:function(t){return 1==t?1:.04*t/--t*Math.sin(25*t)},easeInOutElastic:function(t){return 0==t?0:1==t?1:(t-=.5)<0?(.02+.01/t)*Math.sin(50*t):(.02-.01/t)*Math.sin(50*t)+1},easeInSin:function(t){return 1+Math.sin(Math.PI/2*t-Math.PI/2)},easeOutSin:function(t){return Math.sin(Math.PI/2*t)},easeInOutSin:function(t){return(1+Math.sin(Math.PI*t-Math.PI/2))/2}};function g(t,e,n,r){"number"!=typeof n&&(r=n,n=e,e=0),r||(r={}),r.easing&&(t=d[r.easing](t));var o=t*(n-e)+e;if(void 0!==r.digits){var i=Math.pow(10,r.digits);o=Math.round(o*i)/i}return o}var y=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),m=function(){return(m=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},O=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(n[r[o]]=t[r[o]])}return n},v=function(t,e){t.element=e;var n=e.getBoundingClientRect();t.x=n.left,t.y=n.top,t.width=n.width,t.height=n.height,t.shape={width:t.width,height:t.height}},b=function(t){var e=function(n){var r=n.children,o=O(n,["children"]);return i.a.createElement("div",m({},o,{style:m({display:"inline-block"},o.style),ref:function(t){e.element||(v(e,t),e.refresh())}}),r instanceof Function?r(t):r)};return e.x=0,e.y=0,e.width=0,e.height=0,e.shape={width:0,height:0},e.update=function(){return e.element&&v(e,e.element)},e.refresh=t,e},S=function(t){function e(e){for(var n=t.call(this,e)||this,r=[],o=function(){return n.setState({refs:r.map(function(t){return t})})},i=0;i<(e.count||1);i++)r.push(b(o));return n.state={refs:r},n}return y(e,t),e.prototype.render=function(){var t=this.props.children,e=this.state.refs;return e.forEach(function(t){t.update()}),t(e)},e}(o.Component),x=function(){return(x=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},j=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(n[r[o]]=t[r[o]])}return n},I=function(t){var e=t.sections,n=t.children,r=j(t,["sections","children"]);return i.a.createElement(l.Consumer,null,function(t){var o=Object.keys(e).reduce(function(n,r){var o=t.getSection(r),i=e[r];return(0!=n.per&&0!=i?o.index>n.section.index:o.index<n.section.index)?{section:o,per:i}:n},{section:{index:1/0},per:0}),s=o.section,c=o.per,a=s.range.start+s.offset,u=s.range.start+t.pageOffset,f=s.range.end+t.pageOffset;return i.a.createElement("div",x({},r,{style:x(c<1&&c>0?{position:"absolute",top:a}:{position:"fixed",top:0==c?u:f},r.style)}),n)})};n.d(e,"AnimationContext",function(){return l}),n.d(e,"Animator",function(){return p}),n.d(e,"latest",function(){return h}),n.d(e,"map",function(){return g}),n.d(e,"createRef",function(){return b}),n.d(e,"RefCreator",function(){return S}),n.d(e,"Pin",function(){return I})}])});