@infinityfx/lively 0.0.1

package/animatable.js

@@ -0,0 +1,300 @@
+import { Children, cloneElement, Component, isValidElement } from 'react';
+import Animation from './animation';
+
+// on window resize reset initial elements sizes
+// implement keyframe position (not all evenly spaced)
+// mabye split whileViewport up into onEnter and onLeave
+// animate things like background color
+// implement repeat argument (and maybe repeat delay)
+
+export default class Animatable extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.hover = false;
+        this.hasFocus = false;
+        this.inView = false;
+        this.scrollDelta = 0;
+        this.viewportMargin = props.viewportMargin;
+
+        this.elements = [];
+        this.animations = {
+            animate: this.getAnimation(),
+            onMount: this.getAnimation('onMount'),
+            onUnmount: this.getAnimation('onUnmount'),
+            onClick: this.getAnimation('onClick'),
+            whileHover: this.getAnimation('whileHover'),
+            whileFocus: this.getAnimation('whileFocus'),
+            whileViewport: this.getAnimation('whileViewport')
+        };
+
+        this.level = 0;
+        this.children = [];
+    }
+
+    getAnimation(name = 'animate') {
+        if (name === 'animate' && this.props.animation && (typeof this.props.animation === 'object' || typeof this.props.animation === 'function') && 'use' in this.props.animation) {
+            return this.props.animation.use();
+        }
+
+        return Animation.from(this.props[name], this.props.initial, this.props.scaleCorrection);
+    }
+
+    countNestedLevels(children) {
+        if (!children) return 0;
+
+        let count = 0, nested = 0;
+        Children.forEach(children, (child) => {
+            if (!isValidElement(child)) return;
+            if (child.type === Animatable) count = 1;
+
+            const n = this.countNestedLevels(child.props?.children);
+            nested = nested < n ? n : nested;
+        });
+
+        return nested + count;
+    }
+
+    addEvent(event, callback) {
+        if (!(callback instanceof Function)) return;
+
+        if (!window.UITools?.Events) window.UITools = { Events: {} };
+        if (!(event in window.UITools.Events)) {
+            window.UITools.Events[event] = { unique: 0 };
+            window.addEventListener(event, e => {
+                Object.values(window.UITools.Events[event]).forEach(cb => {
+                    if (cb instanceof Function) cb(e);
+                })
+            });
+        }
+
+        callback.UITools = { ListenerID: window.UITools.Events[event].unique };
+        window.UITools.Events[event][window.UITools.Events[event].unique] = callback;
+        window.UITools.Events[event].unique++;
+    }
+
+    removeEvent(event, callback) {
+        if (!(event in window.UITools?.Events)) return;
+        if (!('ListenerID' in callback.UITools)) return;
+
+        delete window.UITools.Events[event][callback.UITools.ListenerID];
+    }
+
+    componentDidMount() {
+        this.elements.forEach(el => {
+            this.animations.animate?.setInitialStyles(el);
+        });
+
+
+        if (this.props.parentLevel < 1 || this.props.noCascade) {
+            this.scrollEventListener = this.onScroll.bind(this);
+            this.addEvent('scroll', this.scrollEventListener);
+
+            if (this.props.onMount) this.play('onMount', { staggerDelay: 0.001 });
+            if (this.props.whileViewport) this.onScroll();
+        }
+    }
+
+    componentWillUnmount() {
+        this.removeEvent('scroll', this.scrollEventListener);
+
+        if (this.props.onUnmount && (this.props.parentLevel < 1 || this.props.noCascade)) this.play('onUnmount', { reverse: true, immediate: true });
+    }
+
+    inViewport() {
+        let entered = true, left = true;
+
+        this.elements.forEach(el => {
+            const { y } = el.getBoundingClientRect();
+            entered = entered && y + el.clientHeight * (1 - this.viewportMargin) < window.innerHeight;
+            left = left && y > window.innerHeight + el.clientHeight * this.viewportMargin;
+        });
+
+        if (!this.elements.length) {
+            this.children.forEach(({ animatable }) => {
+                const [nestedEntered, nestedLeft] = animatable.inViewport();
+                entered = entered && nestedEntered;
+                left = left && nestedLeft;
+            });
+        }
+
+        return [entered, left];
+    }
+
+    async onScroll() {
+        if (Date.now() - this.scrollDelta < 350) return;
+        this.scrollDelta = Date.now();
+
+        let [entered, left] = this.inViewport();
+
+        if (!this.inView && entered) {
+            this.inView = true;
+            if (this.props.whileViewport) this.play('whileViewport');
+        }
+
+        if (this.inView && left) {
+            this.inView = false;
+            if (this.props.whileViewport) this.play('whileViewport', { reverse: true, immediate: true });
+        }
+    }
+
+    async onEnter(e, callback = false) {
+        if (!this.hover) {
+            if (this.props.whileHover) this.play('whileHover');
+            this.hover = true;
+        }
+
+        if (callback) callback(e);
+    }
+
+    async onLeave(e, callback = false) {
+        if (this.hover) {
+            if (this.props.whileHover) this.play('whileHover', { reverse: true });
+            this.hover = false;
+        }
+
+        if (callback) callback(e);
+    }
+
+    async onFocus(e, callback = false) {
+        if (!this.hasFocus) {
+            if (this.props.whileFocus) this.play('whileFocus');
+            this.hasFocus = true;
+        }
+
+        if (callback) callback(e);
+    }
+
+    async onBlur(e, callback = false) {
+        if (this.hasFocus) {
+            if (this.props.whileFocus) this.play('whileFocus', { reverse: true });
+            this.hasFocus = false;
+        }
+
+        if (callback) callback(e);
+    }
+
+    async onClick(e, callback = false) {
+        if (this.props.onClick) this.play('onClick');
+
+        if (callback) callback(e);
+    }
+
+    async play(animationName, { reverse = false, immediate = false, cascade = false, groupAdjust = 0, cascadeDelay = 0, staggerDelay = 0 } = {}) {
+        if (this.props.parentLevel > 0 && !cascade) return;
+
+        let animation = this.animations[animationName];
+        if (!animation) animation = this.animations.animate;
+        if (!animation) return;
+
+        this.elements.forEach((el, i) => {
+            let offset = 'group' in this.props ? this.props.parentLevel - this.props.group : this.level + groupAdjust;
+            cascadeDelay = reverse ? animation.duration : cascadeDelay; // NOT FULLY CORRECT (also take into account reverse staggering)
+            const delay = reverse ? offset * cascadeDelay : (this.props.parentLevel - offset) * cascadeDelay;
+
+            animation.play(el, {
+                delay: this.props.stagger * i + delay + staggerDelay,
+                reverse,
+                immediate
+            });
+        });
+
+        this.children.forEach(({ animatable, staggerIndex = -1 }) => {
+            animatable.play(animationName, {
+                reverse,
+                immediate,
+                cascade: true,
+                staggerDelay: staggerIndex < 0 ? 0 : this.props.stagger * staggerIndex,
+                cascadeDelay: animation.duration,
+                groupAdjust: staggerIndex < 0 ? 0 : 1
+            });
+        });
+    }
+
+    style(inherited = {}) {
+        const styles = {
+            ...inherited,
+            transitionProperty: `transform, opacity, clip-path, border-radius${this.props.scaleCorrection ? ', width, height, left, top' : ''}`,
+            willChange: 'transform'
+        };
+
+        return styles;
+    }
+
+    mergeProperties(own = {}, passed = {}) {
+        const merged = {};
+        merged.initial = this.mergeProperty(passed.initial, own.initial);
+        merged.animate = this.mergeProperty(passed.animate, own.animate);
+
+        merged.onMount = this.mergeProperty(passed.onMount, own.onMount);
+        merged.onUnmount = this.mergeProperty(passed.onUnmount, own.onUnmount);
+        merged.onClick = this.mergeProperty(passed.onClick, own.onClick);
+        merged.whileHover = this.mergeProperty(passed.whileHover, own.whileHover);
+        merged.whileFocus = this.mergeProperty(passed.whileFocus, own.whileFocus);
+        merged.whileViewport = this.mergeProperty(passed.whileViewport, own.whileViewport);
+
+        merged.viewportMargin = this.mergeProperty(passed.viewportMargin, own.viewportMargin);
+        merged.stagger = this.mergeProperty(passed.stagger, own.stagger);
+
+        return merged;
+    }
+
+    mergeProperty(a, b) {
+        if (!a) return b;
+        if (!b) return a;
+
+        if (typeof a === 'object' || typeof b === 'object') return { ...a, ...b };
+
+        return b;
+    }
+
+    deepClone(component, { index = 0, useElements = false, useEvents = false } = {}) {
+        if (!isValidElement(component)) return component;
+
+        let props = {};
+        if (component.type !== Animatable) {
+            if (useElements) props = { style: this.style(component.props?.style), ref: el => this.elements[index] = el };
+
+            if (useEvents && (this.props.parentLevel < 1 || this.props.noCascade)) {
+                props = {
+                    ...props,
+                    onMouseEnter: e => this.onEnter(e, component.props?.onMouseEnter),
+                    onMouseLeave: e => this.onLeave(e, component.props?.onMouseLeave),
+                    onFocus: e => this.onFocus(e, component.props?.onFocus),
+                    onBlur: e => this.onBlur(e, component.props?.onBlur),
+                    onClick: e => this.onClick(e, component.props?.onClick),
+                };
+                useEvents = false;
+            }
+        }
+
+        if (component.type === Animatable && !component.props?.noCascade) {
+            props = {
+                ...props,
+                ...this.mergeProperties(component.props, this.props),
+                parentLevel: this.parentLevel > 0 ? this.parentLevel : this.level,
+                ref: el => this.children[this.children.length] = { animatable: el, staggerIndex: useElements ? index : -1 }
+            };
+        }
+
+        const children = Children.map(component.props.children, (child, i) => this.deepClone(child, { index: i, useEvents }));
+
+        return Object.values(props).length ? cloneElement(component, props, children) : component; // CHECK IF CORRECT
+    }
+
+    render() {
+        this.level = this.countNestedLevels(this.props.children);
+
+        return Children.map(this.props.children, (child, i) => this.deepClone(child, { index: i, useElements: true, useEvents: true }));
+    }
+
+    static defaultProps = {
+        scaleCorrection: false,
+        parentLevel: 0,
+        stagger: 0.1,
+        viewportMargin: 0.25,
+        animate: {}
+    }
+
+}

package/animate.js

@@ -0,0 +1,43 @@
+import { Children, cloneElement, Component, isValidElement } from 'react';
+import Animatable from './animatable';
+import Move from './animations/move';
+import Pop from './animations/pop';
+
+export default class Animate extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.levels = this.props.levels;
+        this.animations = new Array(this.levels).fill(0).map((_, i) => {
+            return i  < this.props.animations.length ? this.props.animations[i] : this.props.animations[this.props.animations.length - 1];
+        });
+    }
+
+    makeAnimatable(children, level = 1) {
+        if (level < 1 || Children.count(children) < 1) return children;
+
+        const { levels, animations, ...props } = this.props;
+        const animation = this.animations[this.levels - level];
+
+        return <Animatable animation={animation} scaleCorrection={animation.scaleCorrection} {...props}>
+            {Children.map(children, child => {
+                if (!isValidElement(child)) return child;
+
+                return cloneElement(child, {}, this.makeAnimatable(child.props.children, level - 1));
+            })}
+        </Animatable>;
+    }
+
+    render() {
+        return this.makeAnimatable(this.props.children, this.levels);
+    }
+
+    static defaultProps = {
+        levels: 1,
+        stagger: 0.1,
+        viewportMargin: 0.25,
+        animations: [Move, Pop]
+    }
+
+}

package/animation.js

@@ -0,0 +1,333 @@
+import AnimationQueue from './queue';
+
+export default class Animation {
+
+    static initials = {
+        opacity: 1,
+        scale: { x: 1, y: 1 },
+        position: { x: 0, y: 0 },
+        clip: { left: 0, top: 0, right: 0, bottom: 0 },
+        borderRadius: 0,
+        active: { value: true, at: 0 }
+    }
+
+    constructor({ delay = 0, duration = 1, loop = false, interpolate = 'ease', origin = { x: 0.5, y: 0.5 }, scaleCorrection = false, ...properties } = {}, initial = {}) {
+        this.scaleCorrection = scaleCorrection;
+        this.keyframes = this.getKeyframes(properties, initial);
+
+        this.delay = delay;
+        this.duration = duration;
+        this.delta = duration / (this.keyframes.length - 1);
+        this.interpolation = interpolate;
+        this.origin = this.originToStyle(origin);
+
+        this.loop = loop;
+    }
+
+    static from(options, initial = {}, scaleCorrection = false) {
+        if (!options || typeof options === 'boolean') return null;
+
+        return new Animation({ ...options, scaleCorrection }, initial);
+    }
+
+    originToStyle(origin) {
+        let x = 0.5, y = 0.5;
+
+        if (typeof origin === 'object') {
+            x = origin.x;
+            y = origin.y;
+        } else
+            if (typeof origin === 'string') {
+                switch (origin) {
+                    case 'left':
+                        x = 0;
+                        break;
+                    case 'right':
+                        x = 1;
+                        break;
+                    case 'top':
+                        y = 0;
+                        break;
+                    case 'bottom':
+                        y = 1;
+                    case 'center':
+                        break;
+                    default:
+                        x = y = parseFloat(origin);
+                }
+            } else {
+                x = y = origin;
+            }
+
+        return `${x * 100}% ${y * 100}%`;
+    }
+
+    getKeyframes(properties, initial = {}) {
+        for (const key in properties) {
+            let first = key in initial ? initial[key] : Animation.initials[key];
+
+            if (Array.isArray(properties[key])) {
+                properties[key] = properties[key].length > 1 ? properties[key] : [first, ...properties[key]];
+            } else {
+                properties[key] = [first, properties[key]];
+            }
+        }
+
+        const len = Object.values(properties).reduce((len, arr) => arr.length > len ? arr.length : len, 0);
+        let keyframes = new Array(len).fill(0);
+
+        keyframes = keyframes.map((_, i) => {
+            const keyframe = {};
+
+            for (const key in properties) {
+                keyframe[key] = this.interpolateKeyframe(properties[key], i, len);
+            }
+
+            return this.keyframeToStyle(keyframe);
+        });
+
+        return keyframes;
+    }
+
+    interpolate(from, to, n) { // when interpolating pure strings fix!!! (also bools)
+        let unit = typeof from === 'string' ? from.match(/[^0-9\.]*/i) : null;
+        if (typeof to === 'string' && !unit) unit = to.match(/[^0-9\.]*/i);
+
+        from = parseFloat(from);
+        to = parseFloat(to);
+
+        const res = from * (1 - n) + to * n;
+        return unit ? res + unit : res;
+    }
+
+    interpolateKeyframe(property, i, len) {
+        if (!property) return null;
+        if (property.length === len) return property[i];
+
+        const idx = i * ((property.length - 1) / (len - 1));
+        const absIdx = Math.floor(idx);
+
+        let from = property[absIdx];
+        let to = absIdx === property.length - 1 ? null : property[absIdx + 1];
+        if (!to) return from;
+
+        if (typeof from === 'object') {
+            const obj = {};
+            Object.keys(from).forEach(key => {
+                obj[key] = this.interpolate(from[key], to[key], idx - absIdx);
+            });
+
+            return obj;
+        }
+
+        return this.interpolate(from, to, idx - absIdx);
+    }
+
+    propertyToString(property, value, key, unit) {
+        value = value[key];
+        if (typeof value === 'string') return value;
+
+        value = isNaN(value) ? Animation.initials[property][key] : value;
+        return `${value * (unit === '%' ? 100 : 1)}${unit}`;
+    }
+
+    propertyToNumber(property, value, key) {
+        value = value[key];
+        if (typeof value === 'string') {
+            return value.match(/[^0-9\.]*/i) === '%' ? parseFloat(value) / 100 : value;
+        }
+
+        return isNaN(value) ? Animation.initials[property][key] : value;
+    }
+
+    keyframeToStyle(keyframe) {
+        let properties = {
+            transform: ''
+        };
+
+        Object.entries(keyframe).forEach(([key, val]) => {
+            if (val === null || val === undefined) return;
+
+            switch (key) {
+                case 'position':
+                    properties.transform += `translate(${this.propertyToString(key, val, 'x', 'px')}, ${this.propertyToString(key, val, 'y', 'px')}) `;
+                    break;
+                case 'scale':
+                    val = typeof val !== 'object' ? { x: val, y: val } : val;
+
+                    if (this.scaleCorrection) {
+                        properties.width = this.propertyToNumber(key, val, 'x');
+                        properties.height = this.propertyToNumber(key, val, 'y');
+                        break;
+                    }
+
+                    properties.transform += `scale(${this.propertyToString(key, val, 'x', '%')}, ${this.propertyToString(key, val, 'y', '%')}) `;
+                    break;
+                case 'rotation':
+                    properties.transform += `rotate(${parseFloat(val)}deg) `;
+                    break;
+                case 'clip':
+                    const top = this.propertyToString(key, val, 'top', '%'), right = this.propertyToString(key, val, 'right', '%'),
+                        bottom = this.propertyToString(key, val, 'bottom', '%'), left = this.propertyToString(key, val, 'left', '%');
+
+                    properties.clipPath = `inset(${top} ${right} ${bottom} ${left})`;
+                    break;
+                case 'borderRadius':
+                    properties[key] = typeof val === 'string' ? val : val + 'px';
+                break;
+                case 'opacity':
+                case 'active':
+                    properties[key] = val;
+            }
+        });
+
+        if (!properties.transform.length) delete properties.transform;
+        return properties;
+    }
+
+    static setInitial(element) {
+        const {
+            width,
+            height,
+            paddingLeft,
+            paddingRight,
+            paddingTop,
+            paddingBottom,
+            borderRadius,
+            boxSizing
+        } = getComputedStyle(element);
+        const { x, y } = element.getBoundingClientRect();
+
+        if (!('UITools' in element)) element.UITools = {};
+        if (!('queue' in element.UITools)) element.UITools.queue = [];
+        if (!('initialStyles' in element.UITools)) element.UITools.initialStyles = {
+            x,
+            y,
+            includePadding: boxSizing === 'border-box',
+            clientWidth: element.clientWidth,
+            clientHeight: element.clientHeight,
+            width: parseInt(width),
+            height: parseInt(height),
+            paddingLeft: parseInt(paddingLeft),
+            paddingRight: parseInt(paddingRight),
+            paddingTop: parseInt(paddingTop),
+            paddingBottom: parseInt(paddingBottom),
+            borderRadius: parseInt(borderRadius.split(' ')[0])
+        };
+    }
+
+    setInitialStyles(element) {
+        Animation.setInitial(element);
+
+        const keyframe = this.keyframes[0];
+        element.style.transitionDuration = '0s';
+        this.apply(element, keyframe, true);
+    }
+
+    test(scale, total, size, padStart, padEnd, includePadding) {
+        scale = typeof scale === 'string' ? parseInt(scale) / total : scale;
+        size = size - (total - scale * total);
+
+        const pad = padStart + padEnd + (size < 0 ? size : 0);
+        const ratio = padStart / (padStart + padEnd);
+        padStart = includePadding ? scale * padStart : pad * ratio;
+        padEnd = includePadding ? scale * padEnd : pad * (1 - ratio);
+
+        return {
+            size: (size < 0 ? 0 : size) + 'px',
+            padStart: padStart + 'px',
+            padEnd: padEnd + 'px'
+        };
+    }
+
+    apply(element, keyframe, initial = false) {
+        const applyStyles = () => {
+            Object.entries(keyframe).forEach(([key, val]) => {
+                if (key === 'width') {
+                    const { clientWidth, width, paddingLeft, paddingRight, includePadding } = element.UITools.initialStyles;
+                    const { size, padStart, padEnd } = this.test(val, clientWidth, width, paddingLeft, paddingRight, includePadding);
+
+                    element.style.width = size;
+                    element.style.paddingLeft = padStart;
+                    element.style.paddingRight = padEnd;
+                    return;
+                }
+
+                if (key === 'height') {
+                    const { clientHeight, height, paddingTop, paddingBottom, includePadding } = element.UITools.initialStyles;
+                    const { size, padStart, padEnd } = this.test(val, clientHeight, height, paddingTop, paddingBottom, includePadding);
+
+                    element.style.height = size;
+                    element.style.paddingTop = padStart;
+                    element.style.paddingBottom = padEnd;
+                    return;
+                }
+
+                if (key === 'active') return;
+
+                element.style[key] = val;
+            });
+        };
+
+        if ('active' in keyframe) {
+            let when = Object.keys(keyframe.active)[0];
+
+            if (when === 'start' || initial) {
+                element.style.display = keyframe.active[when] ? '' : 'none';
+                initial ? applyStyles() : AnimationQueue.delay(applyStyles, 0.01);
+            } else {
+                AnimationQueue.delay(() => {
+                    element.style.display = keyframe.active[when] ? '' : 'none';
+                }, this.delta);
+                applyStyles();
+            }
+        } else {
+            applyStyles();
+        }
+    }
+
+    start(element, { immediate = false, reverse = false } = {}) {
+        if (element.UITools.animating && !immediate) {
+            element.UITools.queue.push([this, { reverse }]);
+            return;
+        }
+
+        element.style.transitionDuration = `${this.delta}s`;
+        element.style.transitionTimingFunction = this.interpolation;
+        element.style.transformOrigin = this.origin;
+        element.UITools.animating = true;
+        element.UITools.index = 1;
+
+        this.getNext(element, reverse);
+    }
+
+    play(element, { delay = 0, immediate = false, reverse = false } = {}) {
+        if (!element.style) return;
+
+        this.delay || delay ? AnimationQueue.delay(() => this.start(element, { immediate, reverse }), this.delay + delay) : this.start(element, { immediate, reverse });
+    }
+
+    getNext(element, reverse = false) {
+        if (element.UITools.index === this.keyframes.length) {
+            element.UITools.animating = false;
+
+            const [next, options] = element.UITools.queue.shift() || [];
+            if (next) return next.start(element, options);
+
+            if (this.loop) this.start(element, options);
+            return;
+        }
+
+        let idx = element.UITools.index;
+        if (reverse) idx = this.keyframes.length - 1 - idx;
+
+
+        requestAnimationFrame(() => {
+            this.apply(element, this.keyframes[idx]);
+        });
+        element.UITools.index++;
+
+        AnimationQueue.delay(() => this.getNext(element, reverse), this.delta); // cancel this when using immediate
+    }
+
+}

package/animations/fade.js

@@ -0,0 +1,12 @@
+import Animation from '../animation';
+
+export default function Fade(options = {}) {
+    return {
+        scaleCorrection: options.scaleCorrection,
+        use: Fade.use.bind(this, options)
+    };
+}
+
+Fade.use = ({ scaleCorrection = false } = {}) => {
+    return new Animation({ opacity: 1, scaleCorrection, duration: 0.65 }, { opacity: 0 });
+}