@thinkpixellab-public/px-vue 3.0.97 → 3.0.99

package/components/PxAnimate.vue

@@ -0,0 +1,105 @@
+<template>
+    <component :is="tag" :class="bem({ active: invert ? !active : active })" :style="styleVars" />
+</template>
+
+<script>
+import { cssEasings, keywordsToAnimationCssVars } from '../utils/animation.js';
+
+export default {
+    name: 'px-animate',
+    props: {
+        tag: { type: String, default: 'div' },
+
+        enabled: { type: Boolean, default: true },
+
+        active: { type: Boolean, default: false },
+
+        invert: { type: Boolean, default: false },
+
+        /**
+         * A string or object that reprensents the animation in it's active state (see animation.js
+         * for details).
+         */
+        animation: { type: [String, Object], default: '' },
+
+        /**
+         * The duration of the animation in seconds.
+         */
+        duration: { type: Number, default: null },
+
+        /**
+         * The easing function to be used for the animation.
+         */
+        easing: { type: String, default: null },
+
+        /**
+         * A delay (in seconds) to wait before starting the animation once the active state is entered.
+         */
+        delay: { type: Number, default: null },
+
+        /**
+         * When true we animate the element if active on load, otherwise it behaves like CSS (where
+         * we snap to the initial value). Only applies if active when loaded.
+         */
+        animateOnLoad: { type: Boolean, default: false },
+
+        /**
+         * An optional delay (in seconts) to wait before animating the element on load when
+         * animateOnLoad is true.
+         */
+        animateOnLoadDelay: { type: Number, default: 0 },
+    },
+    // data() { return { b: 0 }; },
+    computed: {
+        styleVars() {
+            if (!this.enabled || !this.animation?.length) {
+                return null;
+            }
+
+            const ease = this.easing in cssEasings ? cssEasings[this.easing] : this.easing;
+
+            const vars = keywordsToAnimationCssVars(this.animation, 'px-animate', {
+                duration: this.duration !== null ? this.duration + 's' : null,
+                delay: this.delay !== null ? this.delay + 's' : null,
+                ease: ease !== null ? ease : null,
+            });
+
+            return vars;
+        },
+    },
+    watch: {},
+    mounted() {
+        if (this.active) {
+            if (this.animateOnLoad) {
+                setTimeout(() => {
+                    this.tween?.play();
+                }, this.animateOnLoadDelay * 1000);
+            } else {
+                this.tween?.progress(1);
+            }
+        }
+    },
+    methods: {},
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-animate {
+    transform-origin: center center;
+    perspective: 1000px;
+
+    @include transition(
+        opacity visibility transform,
+        $dur: var(--px-animate-duration, 0.75s),
+        $ease: var(--px-animate-ease, ease-out)
+    );
+
+    &--active {
+        opacity: var(--px-animate-opacity, 1);
+        transform: var(--px-animate-transform, none);
+        visibility: var(--px-animate-transform, initial);
+    }
+}
+</style>

package/components/PxBalancedText.vue

@@ -53,6 +53,12 @@ export default {
         // precaution, we also show if balancing fails for some reason)
         hideUnbalanced: { type: Boolean, default: true },
 
+        /**
+         * Adjusts how much "give" there is in the line length. You can adjust this to make the
+         * balancing more forigiving or strict.
+         */
+        lineAdjust: { type: Number, default: 1.15 },
+
         // enable to get debug color (blue: balanced html, green: balance slot, red: disabled)
         debug: { type: Boolean, default: false },
     },
@@ -140,7 +146,7 @@ export default {
                     this.$emit('start');
                     this.balanceFailed = false;
                     if (this.$refs.text && this.$refs.text.offsetWidth > 0) {
-                        balanceText(this.$refs.text);
+                        balanceText(this.$refs.text, this.lineAdjust);
                     }
                     this.balanced = true;
                     this.$emit('complete');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.97",
+    "version": "3.0.99",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -14,7 +14,7 @@
     "dependencies": {
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "^2.11.5",
-        "@thinkpixellab-public/px-styles": "^3.7.9",
+        "@thinkpixellab-public/px-styles": "^3.7.10",
         "@thinkpixellab-public/px-vue-tester": "^2.0.0",
         "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
         "body-scroll-lock": "^3.1.5",

package/utils/animation.js

@@ -0,0 +1,265 @@
+import { cssHasUnit, cssUnitFallback, cssUnitScale, cssNum, cssUnit, cssRound } from './cssStr';
+
+function prepareLinearValue(value, modifier = 1) {
+    if (!cssHasUnit(value)) {
+        return cssUnitFallback(value * 100 * modifier, '%');
+    }
+    return cssRound(cssUnitScale(value, modifier));
+}
+
+/**
+ * Converts a string that represents an animation into a set of parameters that can be passed to a
+ * library like gsap. The string can be comma or space delimited and made up of the following
+ * keywords:
+ *
+ * Translation: up, down, left, right, x, y
+ *
+ * Scale: zoomin, zoomout, grow, shrink, zoom, scale (expects a custom value like scale:1.5)
+ *
+ * Opacity: fadein, fadeout, fade (same as fadeout but also takes a custom value like fade:0.5)
+ *
+ * Visibility / Opacity: show, hide
+ *
+ * 3D Rotation: up3d, down3d, left3d, right3d
+ *
+ * Value modifiers: xl (2x), lg (1.5x), md (1.25x), sm (0.5x), xs (0.25x)
+ *
+ * The default values for most keywords is 0.33 or 33%. Custom values can also be supplied (e.g.
+ * up:100px). Modifiers will be applied to the custom values as well as the default value.
+ *
+ * Scale values are relative to 1.0 (e.g. zoomin is 1.33, zoomout is 0.67, etc.), Except for 'scale'
+ * which generally expects to be used with a custom value as an absolute scaler (e.g. scale:1.5).
+ *
+ * Keywords can be combined in any order and will be applied in the order they are found. The
+ * keywords parameter can be a string or an object like {grow: true, up: '100px'}.
+ */
+
+export function keywordsToAnimationParams(keywords) {
+    if (!keywords) {
+        return {};
+    }
+
+    // construct a string from the object version of the keywords parameter
+    if (typeof keywords == 'object') {
+        let str = '';
+        for (const key in keywords) {
+            if (keywords[key] === true) {
+                str += key + ' ';
+            } else {
+                str += key + ':' + keywords[key] + ' ';
+            }
+        }
+
+        keywords = str;
+    }
+
+    const words = (keywords || '').split(/[, ]+/).map(s => s.trim());
+    const to = {};
+
+    if (!words || !words.length) {
+        return to;
+    }
+
+    let modifier = 1;
+
+    modifier = words.includes('xl') ? 2 : modifier;
+    modifier = words.includes('lg') ? 1.5 : modifier;
+    modifier = words.includes('md') ? 1.25 : modifier;
+    modifier = words.includes('sm') ? 0.5 : modifier;
+    modifier = words.includes('xs') ? 0.25 : modifier;
+
+    words.forEach(word => {
+        let value = 0.33;
+        let customValue = false;
+
+        word = word.toLowerCase().trim();
+
+        if (word.indexOf(':') > -1) {
+            let [w, v] = word.split(':');
+            word = w;
+            value = v;
+            customValue = true;
+        }
+
+        // TRANSLATE
+
+        if (['up', 'down', 'left', 'right', 'x', 'y'].includes(word)) {
+            const invert = ['up', 'left'].includes(word);
+
+            switch (word) {
+                case 'up':
+                case 'down':
+                case 'y':
+                    to['y'] = prepareLinearValue(value, modifier * (invert ? -1 : 1));
+                    break;
+
+                case 'left':
+                case 'right':
+                case 'x':
+                    to['x'] = prepareLinearValue(value, modifier * (invert ? -1 : 1));
+                    break;
+            }
+        }
+
+        // SCALE
+
+        if (['zoomin', 'zoomout', 'grow', 'shrink', 'zoom', 'scale'].includes(word)) {
+            const invert = ['zoomout', 'shrink'].includes(word);
+
+            // we divide percentages by 100
+            if (cssUnit(value) == '%') {
+                value = cssNum(value) / 100;
+            }
+
+            // we don't use units with scale values
+            value = cssNum(value, 1);
+
+            // scale keyword semantics are such that everything but 'scale' is a value relative to
+            // the default scale of 1. In other words, "grow:0.5" is equivalent to "scale:1.5" and
+            // "shrink:0.5" is equivalent to "scale:0.5". Modifiers are applied to the delta from 1,
+            // so we need to adjust values for the 'scale' keyword accordingly.
+
+            if (word == 'scale') {
+                value -= 1;
+            }
+
+            value *= modifier * (invert ? -1 : 1);
+
+            // add 1 since all scalers are relative at this point
+            value += 1;
+
+            // can't scale smaller than 0
+            value = Math.max(0, value);
+
+            to['scale'] = cssRound(value);
+        }
+
+        // 3D
+
+        if (['up3d', 'down3d', 'left3d', 'right3d'].includes(word)) {
+            const invert = ['down3d', 'left3d'].includes(word);
+
+            // convert percent to a decimal
+            if (cssUnit(value) == '%') {
+                value = cssNum(value) / 100;
+            }
+
+            value = cssNum(value, 1);
+
+            // convert numbers that are less than 1 to deg as a percent of 90
+            if (value < 1) {
+                value = value * 90;
+            }
+
+            value *= modifier;
+            value *= invert ? -1 : 1;
+
+            if (word == 'up3d' || word == 'down3d') {
+                to['rotateX'] = cssRound(value) + 'deg';
+            }
+
+            if (word == 'left3d' || word == 'right3d') {
+                to['rotateY'] = cssRound(value) + 'deg';
+            }
+        }
+
+        // OPACITY / VISIBILITY
+
+        if (['show', 'hide', 'fadein', 'fadeout', 'fade'].includes(word)) {
+            if (['show', 'fadein'].includes(word)) {
+                to['opacity'] = 1;
+            }
+
+            if (['hide', 'fadeout', 'fade'].includes(word)) {
+                to['opacity'] = 0;
+            }
+
+            if (word == 'fade' && customValue) {
+                to['opacity'] = parseFloat(value);
+            }
+
+            if (word == 'show') {
+                to['visibility'] = 'visible';
+            }
+
+            if (word == 'hide') {
+                to['visibility'] = 'hidden';
+            }
+        }
+    });
+
+    return to;
+}
+
+export function keywordsToAnimationCssVars(keywords, prefix = '', otherVars = {}) {
+    prefix = '--' + (prefix ? prefix + '-' : '');
+    const params = keywordsToAnimationParams(keywords);
+    const vars = {};
+
+    if (params.scale || params.x || params.y || params.rotateX || params.rotateY) {
+        vars[prefix + 'transform'] = `translate(${params.x || 0}, ${params.y || 0}) scale(${
+            params.scale || 1
+        })`;
+
+        if (params.rotateX || params.rotateY) {
+            vars[prefix + 'transform'] += `rotateX(${params.rotateX || 0}) rotateY(${
+                params.rotateY || 0
+            })`;
+        }
+
+        delete params.x;
+        delete params.y;
+        delete params.scale;
+        delete params.rotateX;
+        delete params.rotateY;
+    }
+
+    for (const key in params) {
+        vars[prefix + key] = params[key];
+    }
+
+    for (const key in otherVars) {
+        vars[prefix + key] = otherVars[key];
+    }
+
+    return vars;
+}
+
+export const cssEasings = {
+    // Standard eases
+    ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+    easeIn: 'cubic-bezier(0.42, 0, 1, 1)',
+    easeOut: 'cubic-bezier(0, 0, 0.58, 1)',
+    easeInOut: 'cubic-bezier(0.42, 0, 0.58, 1)',
+
+    // Ease variations
+    easeInSine: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
+    easeOutSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+    easeInOutSine: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
+    easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+    easeOutQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+    easeInOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+    easeInCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+    easeOutCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+    easeInQuart: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
+    easeOutQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
+    easeInOutQuart: 'cubic-bezier(0.77, 0, 0.175, 1)',
+    easeInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+    easeOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',
+    easeInOutQuint: 'cubic-bezier(0.86, 0, 0.07, 1)',
+
+    // Custom eases
+    easeInExpo: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
+    easeOutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',
+    easeInOutExpo: 'cubic-bezier(1, 0, 0, 1)',
+    easeInCirc: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
+    easeOutCirc: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
+    easeInOutCirc: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
+    easeInBack: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
+    easeOutBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+    easeInOutBack: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+
+    // Linear
+    linear: 'linear',
+};

package/utils/balanceText.js

@@ -20,24 +20,24 @@
 
 */
 
+// Adjust the final maxwidth by this amount to give a more natural
+// look to the balanced text.
+const ADJUST = 1.15;
+
 // HELPER FUNCTION -- initializes recursive binary search
-var balanceText = function (element) {
+var balanceText = function (element, lineAdjust = ADJUST) {
     if (textElementIsMultipleLines(element)) {
         element.style.maxWidth = '';
-        squeezeContainer(element, element.clientHeight, 0, element.clientWidth);
+        squeezeContainer(element, element.clientHeight, 0, element.clientWidth, lineAdjust);
     }
 };
 
-// Adjust the final maxwidth by this amount to give a more natural
-// look to the balanced text.
-const ADJUST = 1.15;
-
 // Make the headline element as narrow as possible while maintaining
 // its current height (number of lines). Binary search.
-function squeezeContainer(headline, originalHeight, bottomRange, topRange) {
+function squeezeContainer(headline, originalHeight, bottomRange, topRange, lineAdjust = ADJUST) {
     var mid;
     if (bottomRange >= topRange) {
-        headline.style.maxWidth = topRange * ADJUST + 'px';
+        headline.style.maxWidth = topRange * lineAdjust + 'px';
         return;
     }
     mid = (bottomRange + topRange) / 2;
@@ -45,10 +45,10 @@ function squeezeContainer(headline, originalHeight, bottomRange, topRange) {
 
     if (headline.clientHeight > originalHeight) {
         // we've squoze too far and headline has spilled onto an additional line; recurse on wider range
-        squeezeContainer(headline, originalHeight, mid + 1, topRange);
+        squeezeContainer(headline, originalHeight, mid + 1, topRange, lineAdjust);
     } else {
         // headline has not wrapped to another line; keep squeezing!
-        squeezeContainer(headline, originalHeight, bottomRange + 1, mid);
+        squeezeContainer(headline, originalHeight, bottomRange + 1, mid, lineAdjust);
     }
 }
 

package/utils/cssStr.js

@@ -3,7 +3,7 @@ Converts a number to a px string
     px(45) => '45px'
 */
 function cssPx(val, round = true, fallback = null) {
-    if (!isNaN(val) && val !== null) {
+    if ((val || val === 0) && !isNaN(val)) {
         return (round ? Math.round(val) : val) + 'px';
     }
     return fallback;
@@ -13,9 +13,9 @@ function cssPx(val, round = true, fallback = null) {
 Converts a number to a em string
     px(45) => '45em'
 */
-function cssEm(val, fallback) {
-    if (val) {
-        return val + 'em';
+function cssEm(val, fallback = null) {
+    if ((val || val === 0) && !isNaN(val)) {
+        return cssNum(val) + 'em';
     }
     return fallback;
 }
@@ -24,16 +24,21 @@ function cssEm(val, fallback) {
     Converts a number to a percentage string
     percent(0.45) => '45%'
 */
-function cssPcnt(val, roundDec = 0) {
-    if (!isNaN(val)) {
+function cssPcnt(val, roundDec = 2, fallback = null) {
+    if ((val || val === 0) && !isNaN(val)) {
         val *= 100;
 
         if (roundDec) {
             val = Math.round(val * Math.pow(10, roundDec)) / Math.pow(10, roundDec);
         }
+
+        if (roundDec == 0) {
+            val = Math.round(val);
+        }
+
         return val + '%';
     }
-    return null;
+    return fallback;
 }
 
 /*
@@ -93,6 +98,13 @@ function cssUnit(val) {
     return '';
 }
 
+/**
+ * Returns true if the value has a unit
+ */
+function cssHasUnit(val) {
+    return cssUnit(val) !== '';
+}
+
 /**
  * Scales a css value while leaving the unit intact.
  * @param {string} val The css value to scale
@@ -174,9 +186,9 @@ Add the specified unit if no other unit is specified.
     cssUnitFallback('10', 'em') => '10em'
     cssUnitFallback(10, 'em') => '10em'
 */
-function cssUnitFallback(val, fallback, allowNumberless = false) {
-    if (!val) {
-        return val;
+function cssUnitFallback(val, fallback, ignoreCssFunc = false) {
+    if (!val && val !== 0) {
+        return null;
     }
 
     let num = typeof val == 'number' ? val : parseFloat(val.toString());
@@ -184,14 +196,14 @@ function cssUnitFallback(val, fallback, allowNumberless = false) {
     val = val.toString().trim();
 
     if (
-        allowNumberless &&
+        ignoreCssFunc &&
         (val.startsWith('min') || val.startsWith('max') || val.startsWith('calc'))
     ) {
         return val;
     }
 
     if (isNaN(num)) {
-        if (allowNumberless) {
+        if (ignoreCssFunc) {
             num = '';
         } else {
             return null;
@@ -210,19 +222,19 @@ function cssUnitFallback(val, fallback, allowNumberless = false) {
 /**
  * Ems version of cssUnitFallback
  */
-function cssEmFallback(val, allowNumberless = false) {
-    return cssUnitFallback(val, 'em', allowNumberless);
+function cssEmFallback(val, ignoreCssFunc = false) {
+    return cssUnitFallback(val, 'em', ignoreCssFunc);
 }
 
 /**
  * Px version of cssUnitFallback
  */
-function cssPxFallback(val, allowNumberless = false) {
-    return cssUnitFallback(val, 'px', allowNumberless);
+function cssPxFallback(val, ignoreCssFunc = false) {
+    return cssUnitFallback(val, 'px', ignoreCssFunc);
 }
 
 /**
- * Returns true if the value is a valid calc() function
+ * Returns true if the value appears to be a calc() function
  */
 function cssIsCalc(val) {
     if (val && typeof val == 'string' && val.indexOf('calc') > -1) {
@@ -279,12 +291,25 @@ function cssCalcAdd(val1 = 0, val2 = 0, op = '+') {
 }
 
 /**
- * Samem as cssCalcAdd with the op set to '-'. Makes reading code a little easier.
+ * Same as cssCalcAdd with the op set to '-'. Makes reading code a little easier.
  */
 function cssCalcSubtract(val1 = 0, val2 = 0) {
     return cssCalcAdd(val1, val2, '-');
 }
 
+/**
+ * Rounds a css value to the specified number of decimal places (while preserving units).
+ */
+function cssRound(val, dec = 3, preserveNumber = true) {
+    const isNum = typeof val == 'number';
+    const num = cssNum(val);
+    const unit = cssUnit(val);
+    const pow = Math.pow(10, dec);
+    const rounded = Math.round(num * pow) / pow;
+
+    return isNum && preserveNumber ? rounded : rounded + unit;
+}
+
 export {
     cssPx,
     cssEm,
@@ -294,6 +319,7 @@ export {
     cssAspect,
     cssNum,
     cssUnit,
+    cssHasUnit,
     cssUnitScale,
     cssUnitFallback,
     cssEmFallback,
@@ -301,4 +327,5 @@ export {
     cssIsCalc,
     cssCalcAdd,
     cssCalcSubtract,
+    cssRound,
 };

package/utils/scrollWatcher.js

@@ -0,0 +1,293 @@
+/* =============================================================================
+
+A visual explanation of the difference between 'cover' progress mode and
+'contain' progress mode. Basic idea:
+
+Use 'cover' if you want progress to start when the element first enters
+the viewport from the bottom and end when it fully exits from the top.
+
+Use 'contain' if you want progress to start when the element is fully in
+the viewport (as much as possible) and end once it starts to leave. contain
+has slighty different behavior if the element is taller than the viewport.
+
+-------------------------------------     -------------------------------------
+        progressMode = 'cover'                  progressMode = 'contain'
+-------------------------------------     -------------------------------------
+
+    0.0          0.5          1.0              0.0          0.5          1.0
+
+                             #####
++---------+  +---------+  +--#####--+     +---------+  +---------+  +--#####--+
+|         |  |  #####  |  |         |     |         |  |  #####  |  |  #####  |
+|         |  |  #####  |  |         |     |  #####  |  |  #####  |  |         |
++--#####--+  +---------+  +---------+     +--#####--+  +---------+  +---------+
+   #####
+                             #####
+                             #####                                     #####
+                             #####                        #####        #####
++---------+  +--#####--+  +--#####--+     +--#####--+  +--#####--+  +--#####--+
+|         |  |  #####  |  |         |     |  #####  |  |  #####  |  |  #####  |
+|         |  |  #####  |  |         |     |  #####  |  |  #####  |  |  #####  |
++--#####--+  +--#####--+  +---------+     +--#####--+  +--#####--+  +--#####--+
+   #####                                     #####        #####
+   #####                                     #####
+   #####
+
+============================================================================= */
+
+const watcherElementDefaults = {
+    // the area of the viewport that gets watched, default is the full screen but a single
+    // line in the middle of the screen could be specified as {viewportTop: 0.5, viewportHeight: 0}
+    viewportStart: 0,
+    viewportHeight: 1,
+
+    // see description above, options are 'cover' and 'contain'
+    progressMode: 'cover',
+
+    // called when page the scrolls, regardless of where the element is relative to the viewport
+    onScroll: null,
+
+    // called on page scroll if progress is 0 to 1
+    onProgress: null,
+
+    // called when the element enters the viewport
+    onEnter: null,
+    onEnterFromAbove: null,
+    onEnterFromBelow: null,
+
+    // called when the element exits the viewport
+    onExit: null,
+    onExitToAbove: null,
+    onExitToBelow: null,
+
+    // called when the element enters or exits the viewport
+    onEnterOrExit: null,
+};
+
+class ScrollWatcherElement {
+    constructor(element, options) {
+        Object.assign(this, watcherElementDefaults, options);
+
+        this.element = element;
+        this.isFirstUpdate = true;
+        this.frameCount = 0;
+
+        this.calc = {
+            element: element,
+            viewport: {},
+        };
+
+        this.updatePosition();
+        this.updateProgress(window.scrollY);
+    }
+
+    // called by ScrollWatcher on resize
+    updatePosition() {
+        if (!this.element) {
+            return;
+        }
+
+        // update the viewport
+        this.calc.windowHeight = window.innerHeight;
+        this.calc.viewport.top = this.calc.windowHeight * this.viewportStart;
+        this.calc.viewport.height = this.calc.windowHeight * this.viewportHeight;
+        this.calc.viewport.bottom = this.calc.viewport.top + this.calc.viewport.height;
+
+        // get the dimensions and location of the watched element
+        var r = this.element.getBoundingClientRect();
+        this.calc.elementRect = {
+            top: r.top + window.scrollY,
+            bottom: r.top + r.height + window.scrollY,
+            height: r.height,
+        };
+
+        if (this.progressMode === 'contain') {
+            // CONTAIN PROGRESS
+            // Occurs as the element overlaps the viewport (details in comments below)
+
+            if (this.calc.elementRect.height <= this.calc.viewport.height) {
+                // If element is smaller than viewport...
+                // overlapping begins when the bottom of the element meets the bottom of the viewport
+                this.calc.progressBegin = Math.round(
+                    this.calc.elementRect.bottom - this.calc.viewport.bottom
+                );
+                this.calc.progressDuration = Math.round(
+                    this.calc.viewport.height - this.calc.elementRect.height
+                );
+            } else {
+                // If element is larger than viewport...
+                // begin when the top of the element is at the top of the viewport
+                this.calc.progressBegin = Math.round(
+                    this.calc.elementRect.top - this.calc.viewport.top
+                );
+                this.calc.progressDuration = Math.round(
+                    this.calc.elementRect.height - this.calc.viewport.height
+                );
+            }
+        } else {
+            // cover PROGRESS
+            // Occurs as any part of the element is within any part of the viewport
+
+            this.calc.progressBegin = Math.round(
+                this.calc.elementRect.top - this.calc.viewport.bottom
+            );
+            this.calc.progressDuration = Math.round(
+                this.calc.viewport.height + this.calc.elementRect.height
+            );
+        }
+
+        this.calc.progressEnd = this.calc.progressBegin + this.calc.progressDuration;
+    }
+
+    // called by ScrollWatcher on window scroll events
+    updateProgress(scrollTop) {
+        this.calc.wasInViewport = this.calc.isInViewport;
+        this.calc.wasAboveViewport = this.calc.isAboveViewport;
+        this.calc.wasBelowViewport = this.calc.isBelowViewport;
+
+        // delta
+        this.calc.lastScrollTop = this.calc.currentScrollTop
+            ? this.calc.currentScrollTop
+            : scrollTop;
+        this.calc.currentScrollTop = scrollTop;
+        this.calc.scrollDelta = scrollTop - this.calc.lastScrollTop;
+
+        // progress
+        this.calc.actualProgress =
+            (scrollTop - this.calc.progressBegin) / this.calc.progressDuration;
+        this.calc.progress = Math.max(0, Math.min(1, this.calc.actualProgress));
+
+        // viewport
+        this.calc.isAboveViewport = this.calc.actualProgress > 1;
+        this.calc.isBelowViewport = this.calc.actualProgress < 0;
+        this.calc.isInViewport = this.calc.actualProgress > 0 && this.calc.actualProgress <= 1;
+
+        // scroll callback
+        if (this.onScroll) {
+            this.onScroll(this.calc);
+        }
+
+        // progress callback
+        if ((this.calc.isInViewport || this.calc.wasInViewport) && this.onProgress) {
+            this.onProgress(this.calc);
+        }
+
+        // enter callbacks
+        if (
+            (!this.calc.wasInViewport && this.calc.isInViewport) ||
+            (this.calc.wasAboveViewport && !this.calc.isAboveViewport) ||
+            (this.calc.wasBelowViewport && !this.calc.isBelowViewport)
+        ) {
+            if (this.onEnter) {
+                this.onEnter(this.calc);
+            }
+
+            if (this.onEnterOrExit) {
+                this.onEnterOrExit(this.calc);
+            }
+
+            if (this.calc.wasBelowViewport && !this.calc.isBelowViewport && this.onEnterFromBelow) {
+                this.onEnterFromBelow(this.calc);
+            }
+
+            if (this.calc.wasAboveViewport && !this.calc.isAboveViewport && this.onEnterFromAbove) {
+                this.onEnterFromAbove(this.calc);
+            }
+        }
+
+        // exit callbacks
+        if (
+            (this.calc.wasInViewport && !this.calc.isInViewport) ||
+            (this.isFirstUpdate && this.calc.isAboveViewport)
+        ) {
+            if (this.onExit) {
+                this.onExit(this.calc);
+            }
+
+            if (this.onEnterOrExit) {
+                this.onEnterOrExit(this.calc);
+            }
+
+            if (this.calc.isAboveViewport && this.onExitToAbove) {
+                this.onExitToAbove(this.calc);
+            }
+
+            if (this.calc.isBelowViewport && this.onExitToBelow) {
+                this.onExitToBelow(this.calc);
+            }
+        }
+
+        this.isFirstUpdate = false;
+    }
+}
+
+const scrollWatcherDefaults = {};
+
+class ScrollWatcher {
+    static init(options) {
+        ScrollWatcher.elements = [];
+        ScrollWatcher.frames = 0;
+        ScrollWatcher.framesRAF = 0;
+
+        ScrollWatcher.options = Object.assign({}, scrollWatcherDefaults, options);
+
+        this.addEvents();
+
+        ScrollWatcher._isInitialized = true;
+    }
+
+    static addEvents() {
+        ScrollWatcher._isActive = true;
+        window.addEventListener('resize', ScrollWatcher._onResize);
+        window.addEventListener('scroll', ScrollWatcher._onScroll);
+    }
+
+    static removeEvents() {
+        ScrollWatcher._isActive = false;
+        window.removeEventListener('resize', ScrollWatcher._onResize);
+        window.removeEventListener('scroll', ScrollWatcher._onScroll);
+    }
+
+    static watch(element, options) {
+        if (!ScrollWatcher._isInitialized) {
+            ScrollWatcher.init();
+        }
+
+        if (!ScrollWatcher._isActive) {
+            ScrollWatcher.addEvents();
+        }
+
+        var watcherElement = new ScrollWatcherElement(element, options);
+        ScrollWatcher.elements.push(watcherElement);
+
+        return watcherElement;
+    }
+
+    static removeWatch(watcherElement) {
+        var idx = this.elements.indexOf(watcherElement);
+        this.elements = this.elements
+            .slice(0, idx)
+            .concat(this.elements.slice(idx + 1, this.elements.length));
+
+        if (this.elements.length === 0) {
+            this.removeEvents();
+        }
+    }
+
+    static _onResize() {
+        ScrollWatcher.elements.forEach(element => {
+            element.updatePosition();
+        });
+    }
+
+    // handle normal scroll events
+    static _onScroll() {
+        var scrollTop = window.scrollY;
+        var i = 0;
+        for (; i < ScrollWatcher.elements.length; i++) {
+            ScrollWatcher.elements[i].updateProgress(scrollTop);
+        }
+    }
+}
+
+export default ScrollWatcher;