Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
         <main class="o-scroll bg-dark" id="js-scroll" data-scroll-container>
			<div class="text"> Scroll Page</div>
			
			<section style="margin-top: 1200px">
	<div class="container">
<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
		
    
	  </div>
    </section>
        </main>
       
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EasePack.min.js"></script>
    </body>
              
            
!

CSS

              
                body{
	margin: 0;
	
}


main.bg-dark {
	background-color: #000 !important;
	color: #fff;
	display: block;
	
}

.o-scroll {
   overflow: hidden;

}


html.has-scroll-smooth {
  overflow: hidden; }
html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.has-scroll-smooth body {
  overflow: hidden; }

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh; }

html:not(.has-scroll-init) {
    cursor: wait;
    overflow: hidden
}

html:not(.has-scroll-smooth) .c-fixed {
    top: 0
}

/*html.has-scroll-init {
        overflow:auto
    }*/





.o-button,
button {
    display: inline-block;
    overflow: visible;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    background: none transparent;
    color: inherit;
    vertical-align: middle;
    text-align: center;
    text-transform: none;
    font: inherit;
    line-height: normal;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.o-button,
.o-button:focus,
.o-button:hover,
button,
button:focus,
button:hover {
    text-decoration: none
}


ol,
ul {
	list-style: none;
}

a {
	color: #BF9865;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

a:hover,
a:focus {
	color: #000;
	text-decoration: none;
	outline: 0;
}

h1 { font-size: 5vw }

.z-index-2 {
	z-index: 2;
}




.cover-bg {
	position: relative;
	background-size: cover !important;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
}






/*==========================================
			  Padding & Margin
==========================================*/

.txt-10 { font-size: 10px !important; }
.txt-11 { font-size: 11px !important; }
.txt-12 { font-size: 12px !important; }
.txt-13 { font-size: 13px !important; }
.txt-14 { font-size: 14px !important; }
.txt-15 { font-size: 15px !important; }
.txt-16 { font-size: 16px !important; }
.txt-20 { font-size: 20px !important; }
.txt-25 { font-size: 25px !important; }
.txt-30 { font-size: 30px !important; }
.txt-35 { font-size: 35px !important; }
.txt-40 { font-size: 40px !important; }
.txt-50 { font-size: 50px !important; }
.txt-60 { font-size: 60px !important; }
.txt-70 { font-size: 70px; }

.fw-100 { font-weight: 100; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.p-section-70 { padding: 4.38rem 0 }
.p-section-100 { padding: 6.25rem 0 }
.p-section-120 { padding: 7.5rem 0 }
.p-section-150 { padding: 9.4rem 0 }
.p-section-200 { padding: 12.5rem 0 }
.m-section-70 { margin: 4.38rem 0 }
.m-section-100 { margin: 6.25rem 0 }
.m-section-120 { margin: 7.5rem 0 }
.m-section-150 { margin: 9.4rem 0 }
.m-section-200 { margin: 12.5rem 0 }
.mt-6 { margin-top: 3.75rem }
.mt-7 { margin-top: 4.38rem }
.mt-8 { margin-top: 6.25rem }
.mt-9 { margin-top: 7.5rem }
.mt-10 { margin-top: 9.4rem }
.mt-11 { margin-top: 12.5rem }
.mb-6 { margin-bottom: 3.75rem }
.mb-7 { margin-bottom: 4.38rem }
.mb-8 { margin-bottom: 6.25rem }
.mb-9 { margin-bottom: 7.5rem }
.mb-10 { margin-bottom: 9.4rem }
.mb-11 { margin-bottom: 12.5rem }
.ml-6 { margin-left: 3.75rem }
.ml-7 { margin-left: 4.38rem }
.ml-8 { margin-left: 6.25rem }
.mr-6 { margin-right: 3.75rem }
.mr-7 { margin-right: 4.38rem }
.mr-8 { margin-right: 6.25rem }
.p-6 { padding: 6.25rem }
.pt-6 { padding-top: 3.75rem }
.pt-7 { padding-top: 4.38rem }
.pt-8 { padding-top: 6.25rem }
.pt-9 { padding-top: 7.5rem }
.pt-10 { padding-top: 9.4rem }
.pt-11 { padding-top: 12.5rem }
.pt-12 { padding-top: 15.5rem }
.pt-13 { padding-top: 18.75rem }
.pb-6 { padding-bottom: 3.75rem }
.pb-7 { padding-bottom: 4.38rem }
.pb-8 { padding-bottom: 6.25rem }
.pb-9 { padding-bottom: 7.5rem }
.pb-10 { padding-bottom: 9.4rem }
.pb-11 { padding-bottom: 12.5rem }
.pb-12 { padding-bottom: 15.5rem }
.pb-13 { padding-bottom: 18.75rem }
.pl-6 { padding-left: 3.75rem }
.pl-7 { padding-left: 4.38rem }
.pl-8 { padding-left: 6.25rem }
.pl-9 { padding-left: 7.5rem }
.pl-10 { padding-left: 9.4rem }
.pl-11 { padding-left: 12.5rem }
.pr-6 { padding-right: 3.75rem }
.pr-7 { padding-right: 4.38rem }
.pr-8 { padding-right: 6.25rem }
.pr-9 { padding-right: 7.5rem }
.pr-10 { padding-right: 9.4rem }
.pr-11 { padding-right: 12.5rem }


.vh-17 { height: 17vh }
.vh-28 { height: 28vh }
.vh-34 { height: 34vh }
.vh-40 { height: 40vh }
.vh-45 { height: 45vh }
.vh-50 { height: 50vh }
.vh-57 { height: 57vh }
.vh-68 { height: 68vh }
.vh-80 { height: 80vh }
.vh-90 { height: 90vh }


.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100%;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0; }
  .c-scrollbar:hover {
    transform: scaleX(1.45); }
  .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
    opacity: 1; }

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  opacity: 0.8;
  width: 7px;
  border-radius: 0px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab; }
  .has-scroll-dragging .c-scrollbar_thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing; }

.o-h1,
h1 {
    line-height: .9;
}

.o-title {
    margin: 0;
    padding: 2.5rem 0;
    perspective: 600px;
    -webkit-perspective: 600px
}

.o-title_line {
    display: block;
    opacity: 0;
    transform-origin: center top;
    transform-style: preserve-3d;
    transform: translateY(100%) rotateX(-80deg);
    transition: opacity .8s cubic-bezier(.215, .61, .355, 1), transform .8s cubic-bezier(.215, .61, .355, 1);
    font-size: 0
}

.o-title.is-inview .o-title_line {
    transform: none;
    opacity: 1
}

.o-title.is-inview .o-title_line:first-child {
    transition-delay: .4s
}

.o-title.is-inview .o-title_line:nth-child(2) {
    transition-delay: .5s
}

.o-title.is-inview .o-title_line:nth-child(3) {
    transition-delay: .6s
}

.o-title.is-inview .o-title_line:nth-child(4) {
    transition-delay: .7s
}

.o-title_line span {
    display: inline-block;
    min-width: .05em;
    font-size: 13.5vw
}

.o-image_wrapper {
    position: relative;
    overflow: hidden;
    /*background-color: red*/
}


.o-image img {
    /*width: 100%;*/
    opacity: 0;
    transform: scale(1.4);
    transition: opacity 1.2s cubic-bezier(.215, .61, .355, 1), transform 1.2s cubic-bezier(.215, .61, .355, 1);
	background-color: red
}

.o-image.is-inview img {
    opacity: 1;
    transform: scale(1);
    transition-delay: .6s;
}
.c-fixed_wrapper {
    position: relative;
    overflow: hidden;
    background-color: #FF0004 !important;
}


.c-fixed_target {
    bottom: -100vh
}

.c-fixed,
.c-fixed_target {
    position: absolute;
    top: -100vh;
    right: 0;
    left: 0
}

.c-fixed {
    height: 100%;
    background-size: cover;
    background-position: 50%;
    /*opacity: .75;*/
    /*mix-blend-mode: multiply;*/
}

.c-section {
    position: relative
}

@media (max-width:1199px) {
    .c-section {
        padding-bottom: 10vh;
        margin-bottom: 10vh
    }
}

@media (min-width:1200px) {
    .c-section {
        margin-bottom: 35vh
    }
}


.c-section_infos {
    position: relative;
    max-width: 320px;
    z-index: 30
}

@media (min-width:1000px) {
    .c-section_infos {
        padding-top: 7.5rem
    }
    .c-section_infos.-padding {
        padding-top: 35vh
    }
}

@media (max-width:999px) {
    .c-section_infos {
        margin-bottom: 1.875rem
    }
}





.o-row{
  overflow: hidden;
  white-space: nowrap;
  width: max-content;
  width: -webkit-max-content;
  width: -ms-max-content;
  line-height: 80%;
  display: block;
}

.o-row > span{
  display: block;
  transition: .8s cubic-bezier(.215,.61,.355,1);
  transition-delay: .2s;
  transform: translate(0, 100%);
}

.detect .o-row:first-child span{
  transition-delay: .1s;
}

.detect .o-row:nth-child(2) span{
  transition-delay: .2s;
}

.detect .o-row:nth-child(3) span{
  transition-delay: .3s;
}

.detect .o-row:nth-child(4) span{
  transition-delay: .4s;
}

.detect.is-inview .o-row>span{
  transform: translate(0, 0);
}

.img-detect{
  overflow: hidden;
}

.img-detect img{
  transform: scale(1.4, 1.4);
  transition: transform 2.6s cubic-bezier(.215,.61,.355,1);
  transition-delay: .1s;
}

.img-detect.is-inview img{
  transform: scale(1, 1);
}






.o-h2{
  font-size: 4.5vw;
}

.c-banner{
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  padding-top: 20vh;
}


.u-shift{
  transform: translate(20%, 0);
}

.c-banner_image img{
  width: 112%;
  margin-top: -10%;
}


.c-about{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5% var(--padding-side);
}

.c-about_title h2{
  transform: translate(0, -45%);
}

.c-about_image{
  position: relative;
  text-align: center;
}

.c-beforeafter img{
  width: 100%;
  margin-bottom: 25px;
} 

.c-beforeafter--left{
  padding: 0 3vw 0 5vw;
}


.c-beforeafter--right{
  padding: 0 4vw 0 2vw;
	margin-top: 15vh;
}
.anim-1>* {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity .6s cubic-bezier(.215, .61, .355, 1), transform .6s cubic-bezier(.215, .61, .355, 1);
}

.anim-1.is-inview>* {
    opacity: 1;
    transform: none
}

.anim-1.is-inview>:first-child {
    transition-delay: .06s
}

.anim-1.is-inview>:nth-child(2) {
    transition-delay: .12s
}

.anim-1.is-inview>:nth-child(3) {
    transition-delay: .18s
}




.text {
  font-size: 50px;
			margin-top: 100px
}
		div {
  text-align: center
}
.box {
  width:250px;
  height:250px;
  position:relative;
  border-radius:6px;
  margin-top:4px;
  display:block;
  line-height:50px;
  text-align:center;
  color:#333;
	margin-bottom: 300px
  
}

.green{
  background-color:#6fb936;
}

.orange {
  background-color:#f38630;
}
.grey {
  background-color:#989898;
}

              
            
!

JS

              
                gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
	scrollTrigger: ".box",
  rotation: 360,
	duration: 3,
	x: 200
	});





! function() {
    "use strict";

    function s(t, e) {
        if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
    }

    function n(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)
        }
    }

    function o(t, e, i) {
        return e && n(t.prototype, e), i && n(t, i), t
    }

    function e(e, t) {
        var i = Object.keys(e);
        if (Object.getOwnPropertySymbols) {
            var s = Object.getOwnPropertySymbols(e);
            t && (s = s.filter(function(t) {
                return Object.getOwnPropertyDescriptor(e, t).enumerable
            })), i.push.apply(i, s)
        }
        return i
    }

    function i(n) {
        for (var t = 1; t < arguments.length; t++) {
            var o = null != arguments[t] ? arguments[t] : {};
            t % 2 ? e(Object(o), !0).forEach(function(t) {
                var e, i, s;
                e = n, s = o[i = t], i in e ? Object.defineProperty(e, i, {
                    value: s,
                    enumerable: !0,
                    configurable: !0,
                    writable: !0
                }) : e[i] = s
            }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(n, Object.getOwnPropertyDescriptors(o)) : e(Object(o)).forEach(function(t) {
                Object.defineProperty(n, t, Object.getOwnPropertyDescriptor(o, t))
            })
        }
        return n
    }

    function l(t, e) {
        if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
        t.prototype = Object.create(e && e.prototype, {
            constructor: {
                value: t,
                writable: !0,
                configurable: !0
            }
        }), e && a(t, e)
    }

    function r(t) {
        return (r = Object.setPrototypeOf ? Object.getPrototypeOf : function(t) {
            return t.__proto__ || Object.getPrototypeOf(t)
        })(t)
    }

    function a(t, e) {
        return (a = Object.setPrototypeOf || function(t, e) {
            return t.__proto__ = e, t
        })(t, e)
    }

    function c(t) {
        if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
        return t
    }

    function h(t, e) {
        return !e || "object" != typeof e && "function" != typeof e ? c(t) : e
    }

    function d(t, e, i) {
        return (d = "undefined" != typeof Reflect && Reflect.get ? Reflect.get : function(t, e, i) {
            var s = function(t, e) {
                for (; !Object.prototype.hasOwnProperty.call(t, e) && null !== (t = r(t)););
                return t
            }(t, e);
            if (s) {
                var n = Object.getOwnPropertyDescriptor(s, e);
                return n.get ? n.get.call(i) : n.value
            }
        })(t, e, i || t)
    }

    function L(t, e) {
        return function(t) {
            if (Array.isArray(t)) return t
        }(t) || function(t, e) {
            if (!(Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t))) return;
            var i = [],
                s = !0,
                n = !1,
                o = void 0;
            try {
                for (var l, r = t[Symbol.iterator](); !(s = (l = r.next()).done) && (i.push(l.value), !e || i.length !== e); s = !0);
            } catch (t) {
                n = !0, o = t
            } finally {
                try {
                    s || null == r.return || r.return()
                } finally {
                    if (n) throw o
                }
            }
            return i
        }(t, e) || function() {
            throw new TypeError("Invalid attempt to destructure non-iterable instance")
        }()
    }

    function y(t) {
        return function(t) {
            if (Array.isArray(t)) {
                for (var e = 0, i = new Array(t.length); e < t.length; e++) i[e] = t[e];
                return i
            }
        }(t) || function(t) {
            if (Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t)) return Array.from(t)
        }(t) || function() {
            throw new TypeError("Invalid attempt to spread non-iterable instance")
        }()
    }
    var u = {
            el: document,
            name: "scroll",
            offset: [0, 0],
            repeat: !1,
            smooth: !1,
            direction: "vertical",
            gestureDirection: "vertical",
            reloadOnContextChange: !1,
            lerp: .1,
            class: "is-inview",
            scrollbarContainer: !1,
            scrollbarClass: "c-scrollbar",
            scrollingClass: "has-scroll-scrolling",
            draggingClass: "has-scroll-dragging",
            smoothClass: "has-scroll-smooth",
            initClass: "has-scroll-init",
            getSpeed: !1,
            getDirection: !1,
            scrollFromAnywhere: !1,
            multiplier: 1,
            firefoxMultiplier: 50,
            touchMultiplier: 2,
            resetNativeScroll: !0,
		    //inertia: .6, // mio
            tablet: {
                smooth: !1,
                direction: "vertical",
                gestureDirection: "vertical",
                breakpoint: 1024
            },
            smartphone: {
                smooth: !1,
                direction: "vertical",
                gestureDirection: "vertical"
            }
        },
        f = function() {
            function e() {
                var t = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : {};
                s(this, e), Object.assign(this, u, t), this.smartphone = u.smartphone, t.smartphone && Object.assign(this.smartphone, t.smartphone), this.tablet = u.tablet, t.tablet && Object.assign(this.tablet, t.tablet), this.namespace = "locomotive", this.html = document.documentElement, this.windowHeight = window.innerHeight, this.windowWidth = window.innerWidth, this.windowMiddle = {
                    x: this.windowWidth / 2,
                    y: this.windowHeight / 2
                }, this.els = {}, this.currentElements = {}, this.listeners = {}, this.hasScrollTicking = !1, this.hasCallEventSet = !1, this.checkScroll = this.checkScroll.bind(this), this.checkResize = this.checkResize.bind(this), this.checkEvent = this.checkEvent.bind(this), this.instance = {
                    scroll: {
                        x: 0,
                        y: 0
                    },
                    limit: {
                        x: this.html.offsetHeight,
                        y: this.html.offsetHeight
                    },
                    currentElements: this.currentElements
                }, this.isMobile ? this.isTablet ? this.context = "tablet" : this.context = "smartphone" : this.context = "desktop", this.isMobile && (this.direction = this[this.context].direction), "horizontal" === this.direction ? this.directionAxis = "x" : this.directionAxis = "y", this.getDirection && (this.instance.direction = null), this.getDirection && (this.instance.speed = 0), this.html.classList.add(this.initClass), window.addEventListener("resize", this.checkResize, !1)
            }
            return o(e, [{
                key: "init",
                value: function() {
                    this.initEvents()
                }
            }, {
                key: "checkScroll",
                value: function() {
                    this.dispatchScroll()
                }
            }, {
                key: "checkResize",
                value: function() {
                    var t = this;
                    this.resizeTick || (this.resizeTick = !0, requestAnimationFrame(function() {
                        t.resize(), t.resizeTick = !1
                    }))
                }
            }, {
                key: "resize",
                value: function() {}
            }, {
                key: "checkContext",
                value: function() {
                    if (this.reloadOnContextChange) {
                        this.isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || "MacIntel" === navigator.platform && 1 < navigator.maxTouchPoints || this.windowWidth < this.tablet.breakpoint, this.isTablet = this.isMobile && this.windowWidth >= this.tablet.breakpoint;
                        var t = this.context;
                        if (this.isMobile ? this.isTablet ? this.context = "tablet" : this.context = "smartphone" : this.context = "desktop", t != this.context)("desktop" == t ? this.smooth : this[t].smooth) != ("desktop" == this.context ? this.smooth : this[this.context].smooth) && window.location.reload()
                    }
                }
            }, {
                key: "initEvents",
                value: function() {
                    var e = this;
                    this.scrollToEls = this.el.querySelectorAll("[data-".concat(this.name, "-to]")), this.setScrollTo = this.setScrollTo.bind(this), this.scrollToEls.forEach(function(t) {
                        t.addEventListener("click", e.setScrollTo, !1)
                    })
                }
            }, {
                key: "setScrollTo",
                value: function(t) {
                    t.preventDefault(), this.scrollTo(t.currentTarget.getAttribute("data-".concat(this.name, "-href")) || t.currentTarget.getAttribute("href"), {
                        offset: t.currentTarget.getAttribute("data-".concat(this.name, "-offset"))
                    })
                }
            }, {
                key: "addElements",
                value: function() {}
            }, {
                key: "detectElements",
                value: function(l) {
                    var r = this,
                        a = this.instance.scroll.y,
                        c = a + this.windowHeight,
                        h = this.instance.scroll.x,
                        d = h + this.windowWidth;
                    Object.entries(this.els).forEach(function(t) {
                        var e = L(t, 2),
                            i = e[0],
                            s = e[1];
                        if (!s || s.inView && !l || ("horizontal" === r.direction ? d >= s.left && h < s.right && r.setInView(s, i) : c >= s.top && a < s.bottom && r.setInView(s, i)), s && s.inView)
                            if ("horizontal" === r.direction) {
                                var n = s.right - s.left;
                                s.progress = (r.instance.scroll.x - (s.left - r.windowWidth)) / (n + r.windowWidth), (d < s.left || h > s.right) && r.setOutOfView(s, i)
                            } else {
                                var o = s.bottom - s.top;
                                s.progress = (r.instance.scroll.y - (s.top - r.windowHeight)) / (o + r.windowHeight), (c < s.top || a > s.bottom) && r.setOutOfView(s, i)
                            }
                    }), this.hasScrollTicking = !1
                }
            }, {
                key: "setInView",
                value: function(t, e) {
                    this.els[e].inView = !0, t.el.classList.add(t.class), (this.currentElements[e] = t).call && this.hasCallEventSet && (this.dispatchCall(t, "enter"), t.repeat || (this.els[e].call = !1))
                }
            }, {
                key: "setOutOfView",
                value: function(t, e) {
                    var i = this;
                    this.els[e].inView = !1, Object.keys(this.currentElements).forEach(function(t) {
                        t === e && delete i.currentElements[t]
                    }), t.call && this.hasCallEventSet && this.dispatchCall(t, "exit"), t.repeat && t.el.classList.remove(t.class)
                }
            }, {
                key: "dispatchCall",
                value: function(t, e) {
                    this.callWay = e, this.callValue = t.call.split(",").map(function(t) {
                        return t.trim()
                    }), this.callObj = t, 1 == this.callValue.length && (this.callValue = this.callValue[0]);
                    var i = new Event(this.namespace + "call");
                    this.el.dispatchEvent(i)
                }
            }, {
                key: "dispatchScroll",
                value: function() {
                    var t = new Event(this.namespace + "scroll");
                    this.el.dispatchEvent(t)
                }
            }, {
                key: "setEvents",
                value: function(t, e) {
                    this.listeners[t] || (this.listeners[t] = []);
                    var i = this.listeners[t];
                    i.push(e), 1 === i.length && this.el.addEventListener(this.namespace + t, this.checkEvent, !1), "call" === t && (this.hasCallEventSet = !0, this.detectElements(!0))
                }
            }, {
                key: "unsetEvents",
                value: function(t, e) {
                    if (this.listeners[t]) {
                        var i = this.listeners[t],
                            s = i.indexOf(e);
                        s < 0 || (i.splice(s, 1), 0 === i.index && this.el.removeEventListener(this.namespace + t, this.checkEvent, !1))
                    }
                }
            }, {
                key: "checkEvent",
                value: function(t) {
                    var e = this,
                        i = t.type.replace(this.namespace, ""),
                        s = this.listeners[i];
                    s && 0 !== s.length && s.forEach(function(t) {
                        switch (i) {
                            case "scroll":
                                return t(e.instance);
                            case "call":
                                return t(e.callValue, e.callWay, e.callObj);
                            default:
                                return t()
                        }
                    })
                }
            }, {
                key: "startScroll",
                value: function() {}
            }, {
                key: "stopScroll",
                value: function() {}
            }, {
                key: "setScroll",
                value: function(t, e) {
                    this.instance.scroll = {
                        x: 0,
                        y: 0
                    }
                }
            }, {
                key: "destroy",
                value: function() {
                    var e = this;
                    window.removeEventListener("resize", this.checkResize, !1), Object.keys(this.listeners).forEach(function(t) {
                        e.el.removeEventListener(e.namespace + t, e.checkEvent, !1)
                    }), this.listeners = {}, this.scrollToEls.forEach(function(t) {
                        t.removeEventListener("click", e.setScrollTo, !1)
                    }), this.html.classList.remove(this.initClass)
                }
            }]), e
        }(),
        p = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};

    function t(t, e) {
        return t(e = {
            exports: {}
        }, e.exports), e.exports
    }
    t(function(t, e) {
        t.exports = {
            polyfill: function() {
                var a = window,
                    c = document;
                if (!("scrollBehavior" in c.documentElement.style && !0 !== a.__forceSmoothScrollPolyfill__)) {
                    var t, e = a.HTMLElement || a.Element,
                        l = 468,
                        h = {
                            scroll: a.scroll || a.scrollTo,
                            scrollBy: a.scrollBy,
                            elementScroll: e.prototype.scroll || u,
                            scrollIntoView: e.prototype.scrollIntoView
                        },
                        d = a.performance && a.performance.now ? a.performance.now.bind(a.performance) : Date.now,
                        i = (t = a.navigator.userAgent, new RegExp(["MSIE ", "Trident/", "Edge/"].join("|")).test(t) ? 1 : 0);
                    a.scroll = a.scrollTo = function() {
                        void 0 !== arguments[0] && (!0 !== s(arguments[0]) ? r.call(a, c.body, void 0 !== arguments[0].left ? ~~arguments[0].left : a.scrollX || a.pageXOffset, void 0 !== arguments[0].top ? ~~arguments[0].top : a.scrollY || a.pageYOffset) : h.scroll.call(a, void 0 !== arguments[0].left ? arguments[0].left : "object" != typeof arguments[0] ? arguments[0] : a.scrollX || a.pageXOffset, void 0 !== arguments[0].top ? arguments[0].top : void 0 !== arguments[1] ? arguments[1] : a.scrollY || a.pageYOffset))
                    }, a.scrollBy = function() {
                        void 0 !== arguments[0] && (s(arguments[0]) ? h.scrollBy.call(a, void 0 !== arguments[0].left ? arguments[0].left : "object" != typeof arguments[0] ? arguments[0] : 0, void 0 !== arguments[0].top ? arguments[0].top : void 0 !== arguments[1] ? arguments[1] : 0) : r.call(a, c.body, ~~arguments[0].left + (a.scrollX || a.pageXOffset), ~~arguments[0].top + (a.scrollY || a.pageYOffset)))
                    }, e.prototype.scroll = e.prototype.scrollTo = function() {
                        if (void 0 !== arguments[0])
                            if (!0 !== s(arguments[0])) {
                                var t = arguments[0].left,
                                    e = arguments[0].top;
                                r.call(this, this, void 0 === t ? this.scrollLeft : ~~t, void 0 === e ? this.scrollTop : ~~e)
                            } else {
                                if ("number" == typeof arguments[0] && void 0 === arguments[1]) throw new SyntaxError("Value could not be converted");
                                h.elementScroll.call(this, void 0 !== arguments[0].left ? ~~arguments[0].left : "object" != typeof arguments[0] ? ~~arguments[0] : this.scrollLeft, void 0 !== arguments[0].top ? ~~arguments[0].top : void 0 !== arguments[1] ? ~~arguments[1] : this.scrollTop)
                            }
                    }, e.prototype.scrollBy = function() {
                        void 0 !== arguments[0] && (!0 !== s(arguments[0]) ? this.scroll({
                            left: ~~arguments[0].left + this.scrollLeft,
                            top: ~~arguments[0].top + this.scrollTop,
                            behavior: arguments[0].behavior
                        }) : h.elementScroll.call(this, void 0 !== arguments[0].left ? ~~arguments[0].left + this.scrollLeft : ~~arguments[0] + this.scrollLeft, void 0 !== arguments[0].top ? ~~arguments[0].top + this.scrollTop : ~~arguments[1] + this.scrollTop))
                    }, e.prototype.scrollIntoView = function() {
                        if (!0 !== s(arguments[0])) {
                            var t = function(t) {
                                    for (; t !== c.body && !1 === (i = n(e = t, "Y") && o(e, "Y"), s = n(e, "X") && o(e, "X"), i || s);) t = t.parentNode || t.host;
                                    var e, i, s;
                                    return t
                                }(this),
                                e = t.getBoundingClientRect(),
                                i = this.getBoundingClientRect();
                            t !== c.body ? (r.call(this, t, t.scrollLeft + i.left - e.left, t.scrollTop + i.top - e.top), "fixed" !== a.getComputedStyle(t).position && a.scrollBy({
                                left: e.left,
                                top: e.top,
                                behavior: "smooth"
                            })) : a.scrollBy({
                                left: i.left,
                                top: i.top,
                                behavior: "smooth"
                            })
                        } else h.scrollIntoView.call(this, void 0 === arguments[0] || arguments[0])
                    }
                }

                function u(t, e) {
                    this.scrollLeft = t, this.scrollTop = e
                }

                function s(t) {
                    if (null === t || "object" != typeof t || void 0 === t.behavior || "auto" === t.behavior || "instant" === t.behavior) return !0;
                    if ("object" == typeof t && "smooth" === t.behavior) return !1;
                    throw new TypeError("behavior member of ScrollOptions " + t.behavior + " is not a valid value for enumeration ScrollBehavior.")
                }

                function n(t, e) {
                    return "Y" === e ? t.clientHeight + i < t.scrollHeight : "X" === e ? t.clientWidth + i < t.scrollWidth : void 0
                }

                function o(t, e) {
                    var i = a.getComputedStyle(t, null)["overflow" + e];
                    return "auto" === i || "scroll" === i
                }

                function f(t) {
                    var e, i, s, n, o = (d() - t.startTime) / l;
                    n = o = 1 < o ? 1 : o, e = .5 * (1 - Math.cos(Math.PI * n)), i = t.startX + (t.x - t.startX) * e, s = t.startY + (t.y - t.startY) * e, t.method.call(t.scrollable, i, s), i === t.x && s === t.y || a.requestAnimationFrame(f.bind(a, t))
                }

                function r(t, e, i) {
                    var s, n, o, l, r = d();
                    l = t === c.body ? (n = (s = a).scrollX || a.pageXOffset, o = a.scrollY || a.pageYOffset, h.scroll) : (n = (s = t).scrollLeft, o = t.scrollTop, u), f({
                        scrollable: s,
                        method: l,
                        startTime: r,
                        startX: n,
                        startY: o,
                        x: e,
                        y: i
                    })
                }
            }
        }
    }).polyfill;
    var m = function(t) {
            function i() {
                var t, e = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : {};
                return s(this, i), (t = h(this, r(i).call(this, e))).resetNativeScroll && (history.scrollRestoration && (history.scrollRestoration = "manual"), window.scrollTo(0, 0)), window.addEventListener("scroll", t.checkScroll, !1), t
            }
            return l(i, f), o(i, [{
                key: "init",
                value: function() {
                    this.instance.scroll.y = window.pageYOffset, this.addElements(), this.detectElements(), d(r(i.prototype), "init", this).call(this)
                }
            }, {
                key: "checkScroll",
                value: function() {
                    var t = this;
                    d(r(i.prototype), "checkScroll", this).call(this), this.getDirection && this.addDirection(), this.getSpeed && (this.addSpeed(), this.speedTs = Date.now()), this.instance.scroll.y = window.pageYOffset, Object.entries(this.els).length && (this.hasScrollTicking || (requestAnimationFrame(function() {
                        t.detectElements()
                    }), this.hasScrollTicking = !0))
                }
            }, {
                key: "addDirection",
                value: function() {
                    window.pageYOffset > this.instance.scroll.y ? "down" !== this.instance.direction && (this.instance.direction = "down") : window.pageYOffset < this.instance.scroll.y && "up" !== this.instance.direction && (this.instance.direction = "up")
                }
            }, {
                key: "addSpeed",
                value: function() {
                    window.pageYOffset != this.instance.scroll.y ? this.instance.speed = (window.pageYOffset - this.instance.scroll.y) / Math.max(1, Date.now() - this.speedTs) : this.instance.speed = 0
                }
            }, {
                key: "resize",
                value: function() {
                    Object.entries(this.els).length && (this.windowHeight = window.innerHeight, this.updateElements())
                }
            }, {
                key: "addElements",
                value: function() {
                    var p = this;
                    this.els = {}, this.el.querySelectorAll("[data-" + this.name + "]").forEach(function(t, e) {
                        var i = t.getBoundingClientRect(),
                            s = t.dataset[p.name + "Class"] || p.class,
                            n = "string" == typeof t.dataset[p.name + "Id"] ? t.dataset[p.name + "Id"] : e,
                            o = i.top + p.instance.scroll.y,
                            l = i.left,
                            r = i.right,
                            a = o + t.offsetHeight,
                            c = "string" == typeof t.dataset[p.name + "Offset"] ? t.dataset[p.name + "Offset"].split(",") : p.offset,
                            h = t.dataset[p.name + "Repeat"],
                            d = t.dataset[p.name + "Call"];
                        h = "false" != h && (null != h || p.repeat);
                        var u = p.getRelativeOffset(c),
                            f = {
                                el: t,
                                id: n,
                                class: s,
                                top: o + u[0],
                                bottom: a - u[1],
                                left: l,
                                right: r,
                                offset: c,
                                progress: 0,
                                repeat: h,
                                inView: !1,
                                call: d
                            };
                        p.els[n] = f, t.classList.contains(s) && p.setInView(p.els[n], n)
                    })
                }
            }, {
                key: "updateElements",
                value: function() {
                    var r = this;
                    Object.entries(this.els).forEach(function(t) {
                        var e = L(t, 2),
                            i = e[0],
                            s = e[1],
                            n = s.el.getBoundingClientRect().top + r.instance.scroll.y,
                            o = n + s.el.offsetHeight,
                            l = r.getRelativeOffset(s.offset);
                        r.els[i].top = n + l[0], r.els[i].bottom = o - l[1]
                    }), this.hasScrollTicking = !1
                }
            }, {
                key: "getRelativeOffset",
                value: function(t) {
                    var e = [0, 0];
                    if (t)
                        for (var i = 0; i < t.length; i++) "string" == typeof t[i] ? t[i].includes("%") ? e[i] = parseInt(t[i].replace("%", "") * this.windowHeight / 100) : e[i] = parseInt(t[i]) : e[i] = t[i];
                    return e
                }
            }, {
                key: "scrollTo",
                value: function(t) {
                    var e = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : {},
                        i = parseInt(e.offset) || 0,
                        s = !!e.callback && e.callback;
                    if ("string" == typeof t) {
                        if ("top" === t) t = this.html;
                        else if ("bottom" === t) t = this.html.offsetHeight - window.innerHeight;
                        else if (!(t = document.querySelector(t))) return
                    } else if ("number" == typeof t) t = parseInt(t);
                    else if (!t || !t.tagName) return void console.warn("`target` parameter is not valid");
                    if (i = "number" != typeof t ? t.getBoundingClientRect().top + i + this.instance.scroll.y : t + i, s) {
                        i = i.toFixed();
                        window.addEventListener("scroll", function t() {
                            window.pageYOffset.toFixed() === i && (window.removeEventListener("scroll", t), s())
                        })
                    }
                    window.scrollTo({
                        top: i,
                        behavior: "smooth"
                    })
                }
            }, {
                key: "update",
                value: function() {
                    this.addElements(), this.detectElements()
                }
            }, {
                key: "destroy",
                value: function() {
                    d(r(i.prototype), "destroy", this).call(this), window.removeEventListener("scroll", this.checkScroll, !1)
                }
            }]), i
        }(),
        v = Object.getOwnPropertySymbols,
        g = Object.prototype.hasOwnProperty,
        b = Object.prototype.propertyIsEnumerable;
    var w = function() {
        try {
            if (!Object.assign) return !1;
            var t = new String("abc");
            if (t[5] = "de", "5" === Object.getOwnPropertyNames(t)[0]) return !1;
            for (var e = {}, i = 0; i < 10; i++) e["_" + String.fromCharCode(i)] = i;
            if ("0123456789" !== Object.getOwnPropertyNames(e).map(function(t) {
                    return e[t]
                }).join("")) return !1;
            var s = {};
            return "abcdefghijklmnopqrst".split("").forEach(function(t) {
                s[t] = t
            }), "abcdefghijklmnopqrst" === Object.keys(Object.assign({}, s)).join("")
        } catch (t) {
            return !1
        }
    }() ? Object.assign : function(t, e) {
        for (var i, s, n = function(t) {
                if (null == t) throw new TypeError("Object.assign cannot be called with null or undefined");
                return Object(t)
            }(t), o = 1; o < arguments.length; o++) {
            for (var l in i = Object(arguments[o])) g.call(i, l) && (n[l] = i[l]);
            if (v) {
                s = v(i);
                for (var r = 0; r < s.length; r++) b.call(i, s[r]) && (n[s[r]] = i[s[r]])
            }
        }
        return n
    };

    function x() {}
    x.prototype = {
        on: function(t, e, i) {
            var s = this.e || (this.e = {});
            return (s[t] || (s[t] = [])).push({
                fn: e,
                ctx: i
            }), this
        },
        once: function(t, e, i) {
            var s = this;

            function n() {
                s.off(t, n), e.apply(i, arguments)
            }
            return n._ = e, this.on(t, n, i)
        },
        emit: function(t) {
            for (var e = [].slice.call(arguments, 1), i = ((this.e || (this.e = {}))[t] || []).slice(), s = 0, n = i.length; s < n; s++) i[s].fn.apply(i[s].ctx, e);
            return this
        },
        off: function(t, e) {
            var i = this.e || (this.e = {}),
                s = i[t],
                n = [];
            if (s && e)
                for (var o = 0, l = s.length; o < l; o++) s[o].fn !== e && s[o].fn._ !== e && n.push(s[o]);
            return n.length ? i[t] = n : delete i[t], this
        }
    };
    var S = x,
        k = t(function(t, e) {
            (function() {
                (null !== e ? e : this).Lethargy = function() {
                    function t(t, e, i, s) {
                        this.stability = null != t ? Math.abs(t) : 8, this.sensitivity = null != e ? 1 + Math.abs(e) : 100, this.tolerance = null != i ? 1 + Math.abs(i) : 1.1, this.delay = null != s ? s : 150, this.lastUpDeltas = function() {
                            var t, e, i;
                            for (i = [], t = 1, e = 2 * this.stability; 1 <= e ? t <= e : e <= t; 1 <= e ? t++ : t--) i.push(null);
                            return i
                        }.call(this), this.lastDownDeltas = function() {
                            var t, e, i;
                            for (i = [], t = 1, e = 2 * this.stability; 1 <= e ? t <= e : e <= t; 1 <= e ? t++ : t--) i.push(null);
                            return i
                        }.call(this), this.deltasTimestamp = function() {
                            var t, e, i;
                            for (i = [], t = 1, e = 2 * this.stability; 1 <= e ? t <= e : e <= t; 1 <= e ? t++ : t--) i.push(null);
                            return i
                        }.call(this)
                    }
                    return t.prototype.check = function(t) {
                        var e;
                        return null != (t = t.originalEvent || t).wheelDelta ? e = t.wheelDelta : null != t.deltaY ? e = -40 * t.deltaY : null == t.detail && 0 !== t.detail || (e = -40 * t.detail), this.deltasTimestamp.push(Date.now()), this.deltasTimestamp.shift(), 0 < e ? (this.lastUpDeltas.push(e), this.lastUpDeltas.shift(), this.isInertia(1)) : (this.lastDownDeltas.push(e), this.lastDownDeltas.shift(), this.isInertia(-1))
                    }, t.prototype.isInertia = function(t) {
                        var e, i, s, n, o, l, r;
                        return null === (e = -1 === t ? this.lastDownDeltas : this.lastUpDeltas)[0] ? t : !(this.deltasTimestamp[2 * this.stability - 2] + this.delay > Date.now() && e[0] === e[2 * this.stability - 1]) && (s = e.slice(0, this.stability), i = e.slice(this.stability, 2 * this.stability), r = s.reduce(function(t, e) {
                            return t + e
                        }), o = i.reduce(function(t, e) {
                            return t + e
                        }), l = r / s.length, n = o / i.length, Math.abs(l) < Math.abs(n * this.tolerance) && this.sensitivity < Math.abs(n) && t)
                    }, t.prototype.showLastUpDeltas = function() {
                        return this.lastUpDeltas
                    }, t.prototype.showLastDownDeltas = function() {
                        return this.lastDownDeltas
                    }, t
                }()
            }).call(p)
        }),
        T = {
            hasWheelEvent: "onwheel" in document,
            hasMouseWheelEvent: "onmousewheel" in document,
            hasTouch: "ontouchstart" in window || window.TouchEvent || window.DocumentTouch && document instanceof DocumentTouch,
            hasTouchWin: navigator.msMaxTouchPoints && 1 < navigator.msMaxTouchPoints,
            hasPointer: !!window.navigator.msPointerEnabled,
            hasKeyDown: "onkeydown" in document,
            isFirefox: -1 < navigator.userAgent.indexOf("Firefox")
        },
        E = Object.prototype.toString,
        A = Object.prototype.hasOwnProperty;

    function O(t, e) {
        return function() {
            return t.apply(e, arguments)
        }
    }
    var C = k.Lethargy,
        D = "virtualscroll",
        M = R,
        j = 37,
        _ = 38,
        B = 39,
        W = 40,
        H = 32;

    function R(t) {
        ! function(t) {
            if (!t) return console.warn("bindAll requires at least one argument.");
            var e = Array.prototype.slice.call(arguments, 1);
            if (0 === e.length)
                for (var i in t) A.call(t, i) && "function" == typeof t[i] && "[object Function]" == E.call(t[i]) && e.push(i);
            for (var s = 0; s < e.length; s++) {
                var n = e[s];
                t[n] = O(t[n], t)
            }
        }(this, "_onWheel", "_onMouseWheel", "_onTouchStart", "_onTouchMove", "_onKeyDown"), this.el = window, t && t.el && (this.el = t.el, delete t.el), this.options = w({
            mouseMultiplier: 1,
            touchMultiplier: 2,
            firefoxMultiplier: 15,
            keyStep: 120,
            preventTouch: !1,
            unpreventTouchClass: "vs-touchmove-allowed",
            limitInertia: !1,
            useKeyboard: !0,
            useTouch: !0
        }, t), this.options.limitInertia && (this._lethargy = new C), this._emitter = new S, this._event = {
            y: 0,
            x: 0,
            deltaX: 0,
            deltaY: 0
        }, this.touchStartX = null, this.touchStartY = null, this.bodyTouchAction = null, void 0 !== this.options.passive && (this.listenerOptions = {
            passive: this.options.passive
        })
    }

    function Y(t, e, i) {
        return (1 - i) * t + i * e
    }

    function z(t) {
        var e = {};
        if (window.getComputedStyle) {
            var i = getComputedStyle(t),
                s = i.transform || i.webkitTransform || i.mozTransform,
                n = s.match(/^matrix3d\((.+)\)$/);
            return n ? (e.x = n ? parseFloat(n[1].split(", ")[12]) : 0, e.y = n ? parseFloat(n[1].split(", ")[13]) : 0) : (n = s.match(/^matrix\((.+)\)$/), e.x = n ? parseFloat(n[1].split(", ")[4]) : 0, e.y = n ? parseFloat(n[1].split(", ")[5]) : 0), e
        }
    }

    function P(t) {
        for (var e = []; t && t !== document; t = t.parentNode) e.push(t);
        return e
    }
    R.prototype._notify = function(t) {
        var e = this._event;
        e.x += e.deltaX, e.y += e.deltaY, this._emitter.emit(D, {
            x: e.x,
            y: e.y,
            deltaX: e.deltaX,
            deltaY: e.deltaY,
            originalEvent: t
        })
    }, R.prototype._onWheel = function(t) {
        var e = this.options;
        if (!this._lethargy || !1 !== this._lethargy.check(t)) {
            var i = this._event;
            i.deltaX = t.wheelDeltaX || -1 * t.deltaX, i.deltaY = t.wheelDeltaY || -1 * t.deltaY, T.isFirefox && 1 == t.deltaMode && (i.deltaX *= e.firefoxMultiplier, i.deltaY *= e.firefoxMultiplier), i.deltaX *= e.mouseMultiplier, i.deltaY *= e.mouseMultiplier, this._notify(t)
        }
    }, R.prototype._onMouseWheel = function(t) {
        if (!this.options.limitInertia || !1 !== this._lethargy.check(t)) {
            var e = this._event;
            e.deltaX = t.wheelDeltaX ? t.wheelDeltaX : 0, e.deltaY = t.wheelDeltaY ? t.wheelDeltaY : t.wheelDelta, this._notify(t)
        }
    }, R.prototype._onTouchStart = function(t) {
        var e = t.targetTouches ? t.targetTouches[0] : t;
        this.touchStartX = e.pageX, this.touchStartY = e.pageY
    }, R.prototype._onTouchMove = function(t) {
        var e = this.options;
        e.preventTouch && !t.target.classList.contains(e.unpreventTouchClass) && t.preventDefault();
        var i = this._event,
            s = t.targetTouches ? t.targetTouches[0] : t;
        i.deltaX = (s.pageX - this.touchStartX) * e.touchMultiplier, i.deltaY = (s.pageY - this.touchStartY) * e.touchMultiplier, this.touchStartX = s.pageX, this.touchStartY = s.pageY, this._notify(t)
    }, R.prototype._onKeyDown = function(t) {
        var e = this._event;
        e.deltaX = e.deltaY = 0;
        var i = window.innerHeight - 40;
        switch (t.keyCode) {
            case j:
            case _:
                e.deltaY = this.options.keyStep;
                break;
            case B:
            case W:
                e.deltaY = -this.options.keyStep;
                break;
            case t.shiftKey:
                e.deltaY = i;
                break;
            case H:
                e.deltaY = -i;
                break;
            default:
                return
        }
        this._notify(t)
    }, R.prototype._bind = function() {
        T.hasWheelEvent && this.el.addEventListener("wheel", this._onWheel, this.listenerOptions), T.hasMouseWheelEvent && this.el.addEventListener("mousewheel", this._onMouseWheel, this.listenerOptions), T.hasTouch && this.options.useTouch && (this.el.addEventListener("touchstart", this._onTouchStart, this.listenerOptions), this.el.addEventListener("touchmove", this._onTouchMove, this.listenerOptions)), T.hasPointer && T.hasTouchWin && (this.bodyTouchAction = document.body.style.msTouchAction, document.body.style.msTouchAction = "none", this.el.addEventListener("MSPointerDown", this._onTouchStart, !0), this.el.addEventListener("MSPointerMove", this._onTouchMove, !0)), T.hasKeyDown && this.options.useKeyboard && document.addEventListener("keydown", this._onKeyDown)
    }, R.prototype._unbind = function() {
        T.hasWheelEvent && this.el.removeEventListener("wheel", this._onWheel), T.hasMouseWheelEvent && this.el.removeEventListener("mousewheel", this._onMouseWheel), T.hasTouch && (this.el.removeEventListener("touchstart", this._onTouchStart), this.el.removeEventListener("touchmove", this._onTouchMove)), T.hasPointer && T.hasTouchWin && (document.body.style.msTouchAction = this.bodyTouchAction, this.el.removeEventListener("MSPointerDown", this._onTouchStart, !0), this.el.removeEventListener("MSPointerMove", this._onTouchMove, !0)), T.hasKeyDown && this.options.useKeyboard && document.removeEventListener("keydown", this._onKeyDown)
    }, R.prototype.on = function(t, e) {
        this._emitter.on(D, t, e);
        var i = this._emitter.e;
        i && i[D] && 1 === i[D].length && this._bind()
    }, R.prototype.off = function(t, e) {
        this._emitter.off(D, t, e);
        var i = this._emitter.e;
        (!i[D] || i[D].length <= 0) && this._unbind()
    }, R.prototype.reset = function() {
        var t = this._event;
        t.x = 0, t.y = 0
    }, R.prototype.destroy = function() {
        this._emitter.off(), this._unbind()
    };
    var I = 4,
        X = 1e-7,
        V = 10,
        F = "function" == typeof Float32Array;

    function q(t, e) {
        return 1 - 3 * e + 3 * t
    }

    function K(t, e) {
        return 3 * e - 6 * t
    }

    function N(t) {
        return 3 * t
    }

    function U(t, e, i) {
        return ((q(e, i) * t + K(e, i)) * t + N(e)) * t
    }

    function $(t, e, i) {
        return 3 * q(e, i) * t * t + 2 * K(e, i) * t + N(e)
    }

    function G(t) {
        return t
    }
    var J = function(o, e, l, i) {
            if (!(0 <= o && o <= 1 && 0 <= l && l <= 1)) throw new Error("bezier x values must be in [0, 1] range");
            if (o === e && l === i) return G;
            for (var r = F ? new Float32Array(11) : new Array(11), t = 0; t < 11; ++t) r[t] = U(.1 * t, o, l);

            function s(t) {
                for (var e = 0, i = 1; 10 !== i && r[i] <= t; ++i) e += .1;
                var s = e + .1 * ((t - r[--i]) / (r[i + 1] - r[i])),
                    n = $(s, o, l);
                return .001 <= n ? function(t, e, i, s) {
                    for (var n = 0; n < I; ++n) {
                        var o = $(e, i, s);
                        if (0 === o) return e;
                        e -= (U(e, i, s) - t) / o
                    }
                    return e
                }(t, s, o, l) : 0 === n ? s : function(t, e, i, s, n) {
                    for (var o, l, r = 0; 0 < (o = U(l = e + (i - e) / 2, s, n) - t) ? i = l : e = l, Math.abs(o) > X && ++r < V;);
                    return l
                }(t, e, e + .1, o, l)
            }
            return function(t) {
                return 0 === t ? 0 : 1 === t ? 1 : U(s(t), e, i)
            }
        },
        Q = 38,
        Z = 40,
        tt = 32,
        et = 9,
        it = 33,
        st = 34,
        nt = 36,
        ot = 35,
        lt = function(t) {
            function n() {
                var t, e = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : {};
                return s(this, n), history.scrollRestoration && (history.scrollRestoration = "manual"), window.scrollTo(0, 0), (t = h(this, r(n).call(this, e))).inertia && (t.lerp = .1 * t.inertia), t.isScrolling = !1, t.isDraggingScrollbar = !1, t.isTicking = !1, t.hasScrollTicking = !1, t.parallaxElements = {}, t.stop = !1, t.scrollbarContainer = e.scrollbarContainer, t.checkKey = t.checkKey.bind(c(t)), window.addEventListener("keydown", t.checkKey, !1), t
            }
            return l(n, f), o(n, [{
                key: "init",
                value: function() {
                    var e = this;
                    this.html.classList.add(this.smoothClass), this.html.setAttribute("data-".concat(this.name, "-direction"), this.direction), this.instance = i({
                        delta: {
                            x: 0,
                            y: 0
                        }
                    }, this.instance), this.vs = new M({
                        el: this.scrollFromAnywhere ? document : this.el,
                        mouseMultiplier: -1 < navigator.platform.indexOf("Win") ? 1 : .4,
                        firefoxMultiplier: this.firefoxMultiplier,
                        touchMultiplier: this.touchMultiplier,
                        useKeyboard: !1,
                        passive: !0
                    }), this.vs.on(function(t) {
                        e.stop || e.isDraggingScrollbar || requestAnimationFrame(function() {
                            e.updateDelta(t), e.isScrolling || e.startScrolling()
                        })
                    }), this.setScrollLimit(), this.initScrollBar(), this.addSections(), this.addElements(), this.checkScroll(!0), this.transformElements(!0, !0), d(r(n.prototype), "init", this).call(this)
                }
            }, {
                key: "setScrollLimit",
                value: function() {
                    if (this.instance.limit.y = this.el.offsetHeight - this.windowHeight, "horizontal" === this.direction) {
                        for (var t = 0, e = this.el.children, i = 0; i < e.length; i++) t += e[i].offsetWidth;
                        this.instance.limit.x = t - this.windowWidth
                    }
                }
            }, {
                key: "startScrolling",
                value: function() {
                    this.startScrollTs = Date.now(), this.isScrolling = !0, this.checkScroll(), this.html.classList.add(this.scrollingClass)
                }
            }, {
                key: "stopScrolling",
                value: function() {
                    cancelAnimationFrame(this.checkScrollRaf), this.scrollToRaf && (cancelAnimationFrame(this.scrollToRaf), this.scrollToRaf = null), this.isScrolling = !1, this.instance.scroll.y = Math.round(this.instance.scroll.y), this.html.classList.remove(this.scrollingClass)
                }
            }, {
                key: "checkKey",
                value: function(t) {
                    var e = this;
                    if (this.stop) t.keyCode == et && requestAnimationFrame(function() {
                        e.html.scrollTop = 0, document.body.scrollTop = 0, e.html.scrollLeft = 0, document.body.scrollLeft = 0
                    });
                    else {
                        switch (t.keyCode) {
                            case et:
                                requestAnimationFrame(function() {
                                    e.html.scrollTop = 0, document.body.scrollTop = 0, e.html.scrollLeft = 0, document.body.scrollLeft = 0, e.scrollTo(document.activeElement, -window.innerHeight / 2)
                                });
                                break;
                            case Q:
                                this.instance.delta[this.directionAxis] -= 240;
                                break;
                            case Z:
                                this.instance.delta[this.directionAxis] += 240;
                                break;
                            case it:
                                this.instance.delta[this.directionAxis] -= window.innerHeight;
                                break;
                            case st:
                                this.instance.delta[this.directionAxis] += window.innerHeight;
                                break;
                            case nt:
                                this.instance.delta[this.directionAxis] -= this.instance.limit[this.directionAxis];
                                break;
                            case ot:
                                this.instance.delta[this.directionAxis] += this.instance.limit[this.directionAxis];
                                break;
                            case tt:
                                document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLTextAreaElement || (t.shiftKey ? this.instance.delta[this.directionAxis] -= window.innerHeight : this.instance.delta[this.directionAxis] += window.innerHeight);
                                break;
                            default:
                                return
                        }
                        this.instance.delta[this.directionAxis] < 0 && (this.instance.delta[this.directionAxis] = 0), this.instance.delta[this.directionAxis] > this.instance.limit && (this.instance.delta[this.directionAxis] = this.instance.limit), this.isScrolling = !0, this.checkScroll(), this.html.classList.add(this.scrollingClass)
                    }
                }
            }, {
                key: "checkScroll",
                value: function() {
                    var s = this;
                    if (0 < arguments.length && void 0 !== arguments[0] && arguments[0] || this.isScrolling || this.isDraggingScrollbar) {
                        this.hasScrollTicking || (this.checkScrollRaf = requestAnimationFrame(function() {
                            return s.checkScroll()
                        }), this.hasScrollTicking = !0), this.updateScroll();
                        var t = Math.abs(this.instance.delta[this.directionAxis] - this.instance.scroll[this.directionAxis]),
                            e = Date.now() - this.startScrollTs;
                        if (!this.animatingScroll && 100 < e && (t < .5 && 0 != this.instance.delta[this.directionAxis] || t < .5 && 0 == this.instance.delta[this.directionAxis]) && this.stopScrolling(), Object.entries(this.sections).forEach(function(t) {
                                var e = L(t, 2),
                                    i = (e[0], e[1]);
                                i.persistent || s.instance.scroll[s.directionAxis] > i.offset[s.directionAxis] && s.instance.scroll[s.directionAxis] < i.limit[s.directionAxis] ? ("horizontal" === s.direction ? s.transform(i.el, -s.instance.scroll[s.directionAxis], 0) : s.transform(i.el, 0, -s.instance.scroll[s.directionAxis]), i.inView || (i.inView = !0, i.el.style.opacity = 1, i.el.style.pointerEvents = "all", i.el.setAttribute("data-".concat(s.name, "-section-inview"), ""))) : (i.inView && (i.inView = !1, i.el.style.opacity = 0, i.el.style.pointerEvents = "none", i.el.removeAttribute("data-".concat(s.name, "-section-inview"))), s.transform(i.el, 0, 0))
                            }), this.getDirection && this.addDirection(), this.getSpeed && (this.addSpeed(), this.speedTs = Date.now()), this.detectElements(), this.transformElements(), this.hasScrollbar) {
                            var i = this.instance.scroll[this.directionAxis] / this.instance.limit[this.directionAxis] * this.scrollBarLimit[this.directionAxis];
                            "horizontal" === this.direction ? this.transform(this.scrollbarThumb, i, 0) : this.transform(this.scrollbarThumb, 0, i)
                        }
                        d(r(n.prototype), "checkScroll", this).call(this), this.hasScrollTicking = !1
                    }
                }
            }, {
                key: "resize",
                value: function() {
                    this.windowHeight = window.innerHeight, this.windowWidth = window.innerWidth, this.checkContext(), this.windowMiddle = {
                        x: this.windowWidth / 2,
                        y: this.windowHeight / 2
                    }, this.update()
                }
            }, {
                key: "updateDelta",
                value: function(t) {
                    var e, i = this[this.context] && this[this.context].gestureDirection ? this[this.context].gestureDirection : this.gestureDirection;
                    e = "both" === i ? t.deltaX + t.deltaY : "vertical" === i ? t.deltaY : "horizontal" === i ? t.deltaX : t.deltaY, this.instance.delta[this.directionAxis] -= e * this.multiplier, this.instance.delta[this.directionAxis] < 0 && (this.instance.delta[this.directionAxis] = 0), this.instance.delta[this.directionAxis] > this.instance.limit[this.directionAxis] && (this.instance.delta[this.directionAxis] = this.instance.limit[this.directionAxis])
                }
            }, {
                key: "updateScroll",
                value: function(t) {
                    this.isScrolling || this.isDraggingScrollbar ? this.instance.scroll[this.directionAxis] = Y(this.instance.scroll[this.directionAxis], this.instance.delta[this.directionAxis], this.lerp) : this.instance.scroll[this.directionAxis] > this.instance.limit[this.directionAxis] ? this.setScroll(this.instance.scroll[this.directionAxis], this.instance.limit[this.directionAxis]) : this.instance.scroll.y < 0 ? this.setScroll(this.instance.scroll[this.directionAxis], 0) : this.setScroll(this.instance.scroll[this.directionAxis], this.instance.delta[this.directionAxis])
                }
            }, {
                key: "addDirection",
                value: function() {
                    this.instance.delta.y > this.instance.scroll.y ? "down" !== this.instance.direction && (this.instance.direction = "down") : this.instance.delta.y < this.instance.scroll.y && "up" !== this.instance.direction && (this.instance.direction = "up"), this.instance.delta.x > this.instance.scroll.x ? "right" !== this.instance.direction && (this.instance.direction = "right") : this.instance.delta.x < this.instance.scroll.x && "left" !== this.instance.direction && (this.instance.direction = "left")
                }
            }, {
                key: "addSpeed",
                value: function() {
                    this.instance.delta[this.directionAxis] != this.instance.scroll[this.directionAxis] ? this.instance.speed = (this.instance.delta[this.directionAxis] - this.instance.scroll[this.directionAxis]) / Math.max(1, Date.now() - this.speedTs) : this.instance.speed = 0
                }
            }, {
                key: "initScrollBar",
                value: function() {
                    if (this.scrollbar = document.createElement("span"), this.scrollbarThumb = document.createElement("span"), this.scrollbar.classList.add("".concat(this.scrollbarClass)), this.scrollbarThumb.classList.add("".concat(this.scrollbarClass, "_thumb")), this.scrollbar.append(this.scrollbarThumb), this.scrollbarContainer ? this.scrollbarContainer.append(this.scrollbar) : document.body.append(this.scrollbar), this.getScrollBar = this.getScrollBar.bind(this), this.releaseScrollBar = this.releaseScrollBar.bind(this), this.moveScrollBar = this.moveScrollBar.bind(this), this.scrollbarThumb.addEventListener("mousedown", this.getScrollBar), window.addEventListener("mouseup", this.releaseScrollBar), window.addEventListener("mousemove", this.moveScrollBar), this.hasScrollbar = !1, "horizontal" == this.direction) {
                        if (this.instance.limit.x + this.windowWidth <= this.windowWidth) return
                    } else if (this.instance.limit.y + this.windowHeight <= this.windowHeight) return;
                    this.hasScrollbar = !0, this.scrollbarBCR = this.scrollbar.getBoundingClientRect(), this.scrollbarHeight = this.scrollbarBCR.height, this.scrollbarWidth = this.scrollbarBCR.width, "horizontal" === this.direction ? this.scrollbarThumb.style.width = "".concat(this.scrollbarWidth * this.scrollbarWidth / (this.instance.limit.x + this.scrollbarWidth), "px") : this.scrollbarThumb.style.height = "".concat(this.scrollbarHeight * this.scrollbarHeight / (this.instance.limit.y + this.scrollbarHeight), "px"), this.scrollbarThumbBCR = this.scrollbarThumb.getBoundingClientRect(), this.scrollBarLimit = {
                        x: this.scrollbarWidth - this.scrollbarThumbBCR.width,
                        y: this.scrollbarHeight - this.scrollbarThumbBCR.height
                    }
                }
            }, {
                key: "reinitScrollBar",
                value: function() {
                    if (this.hasScrollbar = !1, "horizontal" == this.direction) {
                        if (this.instance.limit.x + this.windowWidth <= this.windowWidth) return
                    } else if (this.instance.limit.y + this.windowHeight <= this.windowHeight) return;
                    this.hasScrollbar = !0, this.scrollbarBCR = this.scrollbar.getBoundingClientRect(), this.scrollbarHeight = this.scrollbarBCR.height, this.scrollbarWidth = this.scrollbarBCR.width, "horizontal" === this.direction ? this.scrollbarThumb.style.width = "".concat(this.scrollbarWidth * this.scrollbarWidth / (this.instance.limit.x + this.scrollbarWidth), "px") : this.scrollbarThumb.style.height = "".concat(this.scrollbarHeight * this.scrollbarHeight / (this.instance.limit.y + this.scrollbarHeight), "px"), this.scrollbarThumbBCR = this.scrollbarThumb.getBoundingClientRect(), this.scrollBarLimit = {
                        x: this.scrollbarWidth - this.scrollbarThumbBCR.width,
                        y: this.scrollbarHeight - this.scrollbarThumbBCR.height
                    }
                }
            }, {
                key: "destroyScrollBar",
                value: function() {
                    this.scrollbarThumb.removeEventListener("mousedown", this.getScrollBar), window.removeEventListener("mouseup", this.releaseScrollBar), window.removeEventListener("mousemove", this.moveScrollBar), this.scrollbar.remove()
                }
            }, {
                key: "getScrollBar",
                value: function(t) {
                    this.isDraggingScrollbar = !0, this.checkScroll(), this.html.classList.remove(this.scrollingClass), this.html.classList.add(this.draggingClass)
                }
            }, {
                key: "releaseScrollBar",
                value: function(t) {
                    this.isDraggingScrollbar = !1, this.html.classList.add(this.scrollingClass), this.html.classList.remove(this.draggingClass)
                }
            }, {
                key: "moveScrollBar",
                value: function(i) {
                    var s = this;
                    this.isDraggingScrollbar && requestAnimationFrame(function() {
                        var t = 100 * (i.clientX - s.scrollbarBCR.left) / s.scrollbarWidth * s.instance.limit.x / 100,
                            e = 100 * (i.clientY - s.scrollbarBCR.top) / s.scrollbarHeight * s.instance.limit.y / 100;
                        0 < e && e < s.instance.limit.y && (s.instance.delta.y = e), 0 < t && t < s.instance.limit.x && (s.instance.delta.x = t)
                    })
                }
            }, {
                key: "addElements",
                value: function() {
                    var D = this;
                    this.els = {}, this.parallaxElements = {}, this.el.querySelectorAll("[data-".concat(this.name, "]")).forEach(function(t, e) {
                        var i, s, n, o = P(t),
                            l = Object.entries(D.sections).map(function(t) {
                                var e = L(t, 2);
                                e[0];
                                return e[1]
                            }).find(function(t) {
                                return o.includes(t.el)
                            }),
                            r = t.dataset[D.name + "Class"] || D.class,
                            a = "string" == typeof t.dataset[D.name + "Id"] ? t.dataset[D.name + "Id"] : "el" + e,
                            c = t.dataset[D.name + "Repeat"],
                            h = t.dataset[D.name + "Call"],
                            d = t.dataset[D.name + "Position"],
                            u = t.dataset[D.name + "Delay"],
                            f = t.dataset[D.name + "Direction"],
                            p = "string" == typeof t.dataset[D.name + "Sticky"],
                            m = !!t.dataset[D.name + "Speed"] && parseFloat(t.dataset[D.name + "Speed"]) / 10,
                            v = "string" == typeof t.dataset[D.name + "Offset"] ? t.dataset[D.name + "Offset"].split(",") : D.offset,
                            y = t.dataset[D.name + "Target"],
                            g = (n = void 0 !== y ? document.querySelector("".concat(y)) : t).getBoundingClientRect();
                        s = null === l ? (i = g.top + D.instance.scroll.y - z(n).y, g.left + D.instance.scroll.x - z(n).x) : l.inView ? (i = g.top + D.instance.scroll.y - z(n).y, g.left + D.instance.scroll.x - z(n).x) : (i = g.top - z(l.el).y - z(n).y, g.left - z(l.el).x - z(n).x);
                        var b = i + n.offsetHeight,
                            w = s + n.offsetWidth,
                            x = {
                                x: (w - s) / 2 + s,
                                y: (b - i) / 2 + i
                            };
                        if (p) {
                            var S = t.getBoundingClientRect(),
                                k = S.top,
                                T = S.left,
                                E = {
                                    x: T - s,
                                    y: k - i
                                };
                            i += window.innerHeight, s += window.innerWidth, b = k + n.offsetHeight - t.offsetHeight - E[D.directionAxis], x = {
                                x: ((w = T + n.offsetWidth - t.offsetWidth - E[D.directionAxis]) - s) / 2 + s,
                                y: (b - i) / 2 + i
                            }
                        }
                        c = "false" != c && (null != c || D.repeat);
                        var A = [0, 0];
                        if (v)
                            if ("horizontal" === D.direction) {
                                for (var O = 0; O < v.length; O++) "string" == typeof v[O] ? v[O].includes("%") ? A[O] = parseInt(v[O].replace("%", "") * D.windowWidth / 100) : A[O] = parseInt(v[O]) : A[O] = v[O];
                                s += A[0], w -= A[1]
                            } else {
                                for (O = 0; O < v.length; O++) "string" == typeof v[O] ? v[O].includes("%") ? A[O] = parseInt(v[O].replace("%", "") * D.windowHeight / 100) : A[O] = parseInt(v[O]) : A[O] = v[O];
                                i += A[0], b -= A[1]
                            }
                        var C = {
                            el: t,
                            id: a,
                            class: r,
                            section: l,
                            top: i,
                            middle: x,
                            bottom: b,
                            left: s,
                            right: w,
                            offset: v,
                            progress: 0,
                            repeat: c,
                            inView: !1,
                            call: h,
                            speed: m,
                            delay: u,
                            position: d,
                            target: n,
                            direction: f,
                            sticky: p
                        };
                        D.els[a] = C, t.classList.contains(r) && D.setInView(D.els[a], a), (!1 !== m || p) && (D.parallaxElements[a] = C)
                    })
                }
            }, {
                key: "addSections",
                value: function() {
                    var a = this;
                    this.sections = {};
                    var t = this.el.querySelectorAll("[data-".concat(this.name, "-section]"));
                    0 === t.length && (t = [this.el]), t.forEach(function(t, e) {
                        var i = "string" == typeof t.dataset[a.name + "Id"] ? t.dataset[a.name + "Id"] : "section" + e,
                            s = t.getBoundingClientRect(),
                            n = {
                                x: s.left - 1.5 * window.innerWidth - z(t).x,
                                y: s.top - 1.5 * window.innerHeight - z(t).y
                            },
                            o = {
                                x: n.x + s.width + 2 * window.innerWidth,
                                y: n.y + s.height + 2 * window.innerHeight
                            },
                            l = "string" == typeof t.dataset[a.name + "Persistent"];
                        t.setAttribute("data-scroll-section-id", i);
                        var r = {
                            el: t,
                            offset: n,
                            limit: o,
                            inView: !1,
                            persistent: l,
                            id: i
                        };
                        a.sections[i] = r
                    })
                }
            }, {
                key: "transform",
                value: function(t, e, i, s) {
                    var n;
                    if (s) {
                        var o = z(t),
                            l = Y(o.x, e, s),
                            r = Y(o.y, i, s);
                        n = "matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(l, ",").concat(r, ",0,1)")
                    } else n = "matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,".concat(e, ",").concat(i, ",0,1)");
                    t.style.webkitTransform = n, t.style.msTransform = n, t.style.transform = n
                }
            }, {
                key: "transformElements",
                value: function(n) {
                    var o = this,
                        l = 1 < arguments.length && void 0 !== arguments[1] && arguments[1],
                        r = this.instance.scroll.x + this.windowWidth,
                        a = this.instance.scroll.y + this.windowHeight,
                        c = {
                            x: this.instance.scroll.x + this.windowMiddle.x,
                            y: this.instance.scroll.y + this.windowMiddle.y
                        };
                    Object.entries(this.parallaxElements).forEach(function(t) {
                        var e = L(t, 2),
                            i = (e[0], e[1]),
                            s = !1;
                        if (n && (s = 0), i.inView || l) switch (i.position) {
                            case "top":
                                s = o.instance.scroll[o.directionAxis] * -i.speed;
                                break;
                            case "elementTop":
                                s = (a - i.top) * -i.speed;
                                break;
                            case "bottom":
                                s = (o.instance.limit[o.directionAxis] - a + o.windowHeight) * i.speed;
                                break;
                            case "left":
                                s = o.instance.scroll[o.directionAxis] * -i.speed;
                                break;
                            case "elementLeft":
                                s = (r - i.left) * -i.speed;
                                break;
                            case "right":
                                s = (o.instance.limit[o.directionAxis] - r + o.windowHeight) * i.speed;
                                break;
                            default:
                                s = (c[o.directionAxis] - i.middle[o.directionAxis]) * -i.speed
                        }
                        i.sticky && (s = i.inView ? "horizontal" === o.direction ? o.instance.scroll.x - i.left + window.innerWidth : o.instance.scroll.y - i.top + window.innerHeight : "horizontal" === o.direction ? o.instance.scroll.x < i.left - window.innerWidth && o.instance.scroll.x < i.left - window.innerWidth / 2 ? 0 : o.instance.scroll.x > i.right && o.instance.scroll.x > i.right + 100 && i.right - i.left + window.innerWidth : o.instance.scroll.y < i.top - window.innerHeight && o.instance.scroll.y < i.top - window.innerHeight / 2 ? 0 : o.instance.scroll.y > i.bottom && o.instance.scroll.y > i.bottom + 100 && i.bottom - i.top + window.innerHeight), !1 !== s && ("horizontal" === i.direction || "horizontal" === o.direction && "vertical" !== i.direction ? o.transform(i.el, s, 0, !n && i.delay) : o.transform(i.el, 0, s, !n && i.delay))
                    })
                }
            }, {
                key: "scrollTo",
                value: function(t) {
                    var i = this,
                        e = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : {},
                        s = parseInt(e.offset) || 0,
                        n = e.duration || 1e3,
                        o = e.easing || [.25, 0, .35, 1],
                        l = !!e.disableLerp,
                        r = !!e.callback && e.callback;
                    if (o = J.apply(void 0, y(o)), "string" == typeof t) {
                        if ("top" === t) t = 0;
                        else if ("bottom" === t) t = this.instance.limit.y;
                        else if ("left" === t) t = 0;
                        else if ("right" === t) t = this.instance.limit.x;
                        else if (!(t = document.querySelector(t))) return
                    } else if ("number" == typeof t) t = parseInt(t);
                    else if (!t || !t.tagName) return void console.warn("`target` parameter is not valid");
                    if ("number" != typeof t) {
                        if (!P(t).includes(this.el)) return;
                        var a = t.getBoundingClientRect(),
                            c = a.top,
                            h = a.left,
                            d = P(t).find(function(e) {
                                return Object.entries(i.sections).map(function(t) {
                                    var e = L(t, 2);
                                    e[0];
                                    return e[1]
                                }).find(function(t) {
                                    return t.el == e
                                })
                            }),
                            u = 0;
                        u = d ? z(d)[this.directionAxis] : -this.instance.scroll[this.directionAxis], s = "horizontal" === this.direction ? h + s - u : c + s - u
                    } else s = t + s;
                    var f = parseFloat(this.instance.delta[this.directionAxis]),
                        p = Math.max(0, Math.min(s, this.instance.limit[this.directionAxis])) - f,
                        m = function(t) {
                            l ? "horizontal" === i.direction ? i.setScroll(f + p * t, i.instance.delta.y) : i.setScroll(i.instance.delta.x, f + p * t) : i.instance.delta[i.directionAxis] = f + p * t
                        };
                    this.animatingScroll = !0, this.stopScrolling(), this.startScrolling();
                    var v = Date.now();
                    ! function t() {
                        var e = (Date.now() - v) / n;
                        1 < e ? (m(1), i.animatingScroll = !1, 0 == n && i.update(), r && r()) : (i.scrollToRaf = requestAnimationFrame(t), m(o(e)))
                    }()
                }
            }, {
                key: "update",
                value: function() {
                    this.setScrollLimit(), this.addSections(), this.addElements(), this.detectElements(), this.updateScroll(), this.transformElements(!0), this.reinitScrollBar(), this.checkScroll(!0)
                }
            }, {
                key: "startScroll",
                value: function() {
                    this.stop = !1
                }
            }, {
                key: "stopScroll",
                value: function() {
                    this.stop = !0
                }
            }, {
                key: "setScroll",
                value: function(t, e) {
                    this.instance = i({}, this.instance, {
                        scroll: {
                            x: t,
                            y: e
                        },
                        delta: {
                            x: t,
                            y: e
                        },
                        speed: 0
                    })
                }
            }, {
                key: "destroy",
                value: function() {
                    d(r(n.prototype), "destroy", this).call(this), this.stopScrolling(), this.html.classList.remove(this.smoothClass), this.vs.destroy(), this.destroyScrollBar(), window.removeEventListener("keydown", this.checkKey, !1)
                }
            }]), n
        }(),
        rt = function() {
            function e() {
                var t = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : {};
                s(this, e), this.options = t, Object.assign(this, u, t), this.smartphone = u.smartphone, t.smartphone && Object.assign(this.smartphone, t.smartphone), this.tablet = u.tablet, t.tablet && Object.assign(this.tablet, t.tablet), this.smooth || "horizontal" != this.direction || console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible"), this.tablet.smooth || "horizontal" != this.tablet.direction || console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (tablet)"), this.smartphone.smooth || "horizontal" != this.smartphone.direction || console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (smartphone)"), this.init()
            }
            return o(e, [{
                key: "init",
                value: function() {
                    if (this.options.isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || "MacIntel" === navigator.platform && 1 < navigator.maxTouchPoints || window.innerWidth < this.tablet.breakpoint, this.options.isTablet = this.options.isMobile && window.innerWidth >= this.tablet.breakpoint, this.smooth && !this.options.isMobile || this.tablet.smooth && this.options.isTablet || this.smartphone.smooth && this.options.isMobile && !this.options.isTablet ? this.scroll = new lt(this.options) : this.scroll = new m(this.options), this.scroll.init(), window.location.hash) {
                        var t = window.location.hash.slice(1, window.location.hash.length),
                            e = document.getElementById(t);
                        e && this.scroll.scrollTo(e)
                    }
                }
            }, {
                key: "update",
                value: function() {
                    this.scroll.update()
                }
            }, {
                key: "start",
                value: function() {
                    this.scroll.startScroll()
                }
            }, {
                key: "stop",
                value: function() {
                    this.scroll.stopScroll()
                }
            }, {
                key: "scrollTo",
                value: function(t, e) {
                    this.scroll.scrollTo(t, e)
                }
            }, {
                key: "setScroll",
                value: function(t, e) {
                    this.scroll.setScroll(t, e)
                }
            }, {
                key: "on",
                value: function(t, e) {
                    this.scroll.setEvents(t, e)
                }
            }, {
                key: "off",
                value: function(t, e) {
                    this.scroll.unsetEvents(t, e)
                }
            }, {
                key: "destroy",
                value: function() {
                    this.scroll.destroy()
                }
            }]), e
        }();
    ! function() {
        document.documentElement.classList.add("is-loaded"), document.documentElement.classList.remove("is-loading"), setTimeout(function() {
            document.documentElement.classList.add("is-ready")
        }, 300);
        var t = {
            el: document.querySelector("#js-scroll"),
            smooth: !0,
            getSpeed: !0,
            getDirection: !0
        };
        "true" == document.querySelector("#js-scroll").getAttribute("data-horizontal") && (t.direction = "horizontal", t.gestureDirection = "both", t.tablet = {
            smooth: !0,
            direction: "horizontal",
            horizontalGesture: !0
        }, t.smartphone = {
            smooth: !1
        }, t.reloadOnContextChange = !0), setTimeout(function() {
            var i = new rt(t),
                n = [],
                o = [];
            i.on("scroll", function(t) {
                var e = 360 * t.scroll.y / t.limit;
                i.el.style.backgroundColor = "hsl(".concat(e, ", 11%, 81%)"), n.forEach(function(t) {
                    t.el.style.backgroundColor = "hsl(".concat(e, ", 11%, 81%)")
                }), o.forEach(function(t) {
                    t.el.style.color = "hsl(".concat(e, ", 11%, 81%)")
                }), document.documentElement.setAttribute("data-direction", t.direction)
            }), i.on("call", function(t, e, i) {
                if ("dynamicBackground" === t)
                    if ("enter" === e) n.push({
                        id: i.id,
                        el: i.el
                    });
                    else
                        for (var s = 0; s < n.length; s++) i.id === n[s].id && n.splice(s, 1);
                else if ("dynamicColor" === t)
                    if ("enter" === e) o.push({
                        id: i.id,
                        el: i.el
                    });
                    else
                        for (s = 0; s < o.length; s++) i.id === o[s].id && o.splice(s, 1)
            })
        }, 1e3)
    }()
}();
              
            
!
999px

Console