@nascentdigital/funnel-ui 4.4.18

package/dist/client/transitions/parallax/ParallaxRemote.js

@@ -0,0 +1,136 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParallaxRemote = ParallaxRemote;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const hooks_1 = require("../../hooks");
+const ParallaxUtils_1 = require("./ParallaxUtils");
+const useDisableParallax_1 = require("./useDisableParallax");
+const useTransforms_1 = require("./useTransforms");
+// component
+function ParallaxRemote({ scroller, container, scope, targets = [], spring, disabled: disableMode = false }) {
+    var _a;
+    // bind hooks
+    const disabled = (0, useDisableParallax_1.useDisableParallax)(disableMode);
+    const scrollerRef = (0, hooks_1.useElementSelector)(scroller);
+    const containerRef = (0, hooks_1.useElementSelector)(container);
+    const containerSize = (_a = (0, hooks_1.useElementSize)(containerRef.current)) !== null && _a !== void 0 ? _a : funnel_core_1.Size.none;
+    const { scrollYProgress } = (0, react_1.useScroll)({
+        container: scrollerRef,
+        target: containerRef,
+        offset: ParallaxUtils_1.ParallaxUtils.getScrollOffset(scope)
+    });
+    // if spring effect provided, pipe progress through spring
+    if (spring) {
+        return ((0, jsx_runtime_1.jsx)(WithSpring, { spring: spring, scrollProgress: scrollYProgress, render: (transformedProgress) => (targets === null || targets === void 0 ? void 0 : targets.map(target => (0, jsx_runtime_1.jsx)(ParallaxRemoteController, { progress: transformedProgress, selector: target.selector, bindings: target.bindings, containerSize: containerSize, disabled: disabled }, target.selector))) }));
+    }
+    // render
+    return targets === null || targets === void 0 ? void 0 : targets.map(target => (0, jsx_runtime_1.jsx)(ParallaxRemoteController, { progress: scrollYProgress, selector: target.selector, bindings: target.bindings, containerSize: containerSize, disabled: disabled }, target.selector));
+}
+// spring decorator
+function WithSpring({ spring, scrollProgress, render }) {
+    const progress = (0, react_1.useSpring)(scrollProgress, getSpringConfig(spring));
+    return render(progress);
+}
+// helpers
+function getSpringConfig(springEffect) {
+    // if no desired spring effect disable spring
+    switch (springEffect) {
+        case 'stiff':
+            return {
+                stiffness: 190,
+                damping: 25
+            };
+        case 'elastic':
+            return {
+                stiffness: 500,
+                damping: 35
+            };
+        default:
+            return {
+                stiffness: 1000,
+                damping: 100
+            };
+    }
+}
+// controller
+function ParallaxRemoteController({ progress, selector, bindings: _bindings, containerSize: _containerSize, disabled = false }) {
+    var _a;
+    // bind
+    const elementRef = (0, hooks_1.useElementSelector)(selector);
+    const element = elementRef.current;
+    const _elementSize = (_a = (0, hooks_1.useElementSize)(element)) !== null && _a !== void 0 ? _a : funnel_core_1.Size.none;
+    const bindings = (0, hooks_1.useLatestValue)(_bindings);
+    const containerSize = (0, hooks_1.useLatestValue)(_containerSize);
+    const elementSize = (0, hooks_1.useLatestValue)(_elementSize);
+    const { motionValues, transformerMap } = (0, react_2.useMemo)(() => (0, useTransforms_1.getTransformers)({ bindings, containerSize, elementSize, disabled }), [bindings, containerSize, elementSize, disabled]);
+    // pipe transforms via animation
+    (0, react_2.useLayoutEffect)(() => {
+        // skip if there's no element
+        if (!element) {
+            return;
+        }
+        // or skip if disabled
+        else if (disabled) {
+            return;
+        }
+        // create updater
+        const style = element.style;
+        const update = (progress) => {
+            var _a, _b;
+            // update opacity
+            const { opacity, x, y, scale, rotate, width, height, borderRadius, borderRadiusTop, borderRadiusBottom } = transformerMap;
+            if (opacity) {
+                style.opacity = String(opacity.transform(progress));
+            }
+            // update translation (if any)
+            if (x || y) {
+                style.translate = `${(_a = x === null || x === void 0 ? void 0 : x.transform(progress)) !== null && _a !== void 0 ? _a : 0}px ${(_b = y === null || y === void 0 ? void 0 : y.transform(progress)) !== null && _b !== void 0 ? _b : 0}px`;
+            }
+            // update scale
+            if (scale) {
+                style.scale = String(scale.transform(progress));
+            }
+            // update rotation
+            if (rotate) {
+                style.rotate = `${rotate.transform(progress)}deg`;
+            }
+            // update width
+            if (width) {
+                style.width = `${width.transform(progress)}px`;
+            }
+            // update height
+            if (height) {
+                style.height = `${height.transform(progress)}px`;
+            }
+            // update rotation
+            if (borderRadius) {
+                style.borderRadius = `${borderRadius.transform(progress)}px`;
+            }
+            else if (borderRadiusTop) {
+                const radius = `${borderRadiusTop.transform(progress)}px`;
+                style.borderTopLeftRadius = radius;
+                style.borderTopRightRadius = radius;
+            }
+            else if (borderRadiusBottom) {
+                const radius = `${borderRadiusBottom.transform(progress)}px`;
+                style.borderBottomLeftRadius = radius;
+                style.borderBottomRightRadius = radius;
+            }
+        };
+        // set initial values
+        update(progress.get());
+        // captures updates
+        progress.on('change', update);
+    }, [element, progress, transformerMap, disabled]);
+    // clean up motion values on unmount
+    (0, react_2.useEffect)(() => {
+        return () => Object.values(motionValues)
+            .forEach(motionValue => motionValue.destroy());
+    }, [motionValues]);
+    // render nothing (the controller is non-visual)
+    return null;
+}

package/dist/client/transitions/parallax/ParallaxUtils.d.ts

@@ -0,0 +1,5 @@
+import { UseScrollOptions } from 'motion/react';
+export declare namespace ParallaxUtils {
+    type ParallaxScope = 'full' | 'enter' | 'exit';
+    function getScrollOffset(scope: ParallaxScope): UseScrollOptions['offset'];
+}

package/dist/client/transitions/parallax/ParallaxUtils.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParallaxUtils = void 0;
+// namespace
+var ParallaxUtils;
+(function (ParallaxUtils) {
+    // helpers
+    function getScrollOffset(scope) {
+        switch (scope) {
+            case 'enter':
+                return ['start end', 'start start'];
+            case 'exit':
+                return ['end end', 'end start'];
+            default:
+                return ['start end', 'end start'];
+        }
+    }
+    ParallaxUtils.getScrollOffset = getScrollOffset;
+})(ParallaxUtils || (exports.ParallaxUtils = ParallaxUtils = {}));

package/dist/client/transitions/parallax/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ParallaxRemote';
+export * from './Parallax';

package/dist/client/transitions/parallax/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ParallaxRemote"), exports);
+__exportStar(require("./Parallax"), exports);

package/dist/client/transitions/parallax/useDisableParallax.d.ts

@@ -0,0 +1,4 @@
+export declare function useDisableParallax(disabled?: useDisableParallax.Disabled): boolean;
+export declare namespace useDisableParallax {
+    type Disabled = boolean | 'reduce-motion';
+}

package/dist/client/transitions/parallax/useDisableParallax.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDisableParallax = useDisableParallax;
+const react_1 = require("motion/react");
+// hook
+function useDisableParallax(disabled = false) {
+    // bind hook
+    const reduceMotion = (0, react_1.useReducedMotion)();
+    // return based on arg
+    return typeof disabled === 'boolean'
+        ? disabled
+        : reduceMotion !== null && reduceMotion !== void 0 ? reduceMotion : false;
+}

package/dist/client/transitions/parallax/useParallax.d.ts

@@ -0,0 +1,2 @@
+import { ParallaxContext } from './ParallaxContext';
+export declare function useParallax(): ParallaxContext.Props;

package/dist/client/transitions/parallax/useParallax.js

@@ -0,0 +1,18 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useParallax = useParallax;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const ParallaxContext_1 = require("./ParallaxContext");
+// hook
+function useParallax() {
+    // resolve context
+    const context = (0, react_1.useContext)(ParallaxContext_1.ParallaxContext);
+    // throw if context isn't bound
+    if (!context) {
+        throw new funnel_core_1.IllegalStateError('Attempt to use ParallaxItem outside of Parallax component.');
+    }
+    // return context
+    return context;
+}

package/dist/client/transitions/parallax/useTransforms.d.ts

@@ -0,0 +1,34 @@
+import { Size, Transform } from '@nascentdigital/funnel-core';
+import { MotionValue } from 'motion/react';
+export declare function useTransforms({ progress, bindings: _bindings, containerSize: _containerSize, elementSize: _elementSize, disabled }: useTransforms.Args): Partial<Record<useTransforms.Target, MotionValue<any>>>;
+export declare namespace useTransforms {
+    type Args = {
+        progress: MotionValue<number>;
+        bindings: Bindings;
+        containerSize: Size;
+        elementSize: Size;
+        disabled?: boolean;
+    };
+    type InterpolatorOptions = {
+        scale?: Scale;
+        from?: number[];
+        to: number[];
+        ease?: Easing;
+    };
+    type Scale = 'none' | 'container-x' | 'container-y' | 'space-x' | 'space-y' | 'item-x' | 'item-y';
+    type Easing = 'linear' | 'sineIn' | 'sineOut' | 'sineInOut' | 'easeIn' | 'easeOut' | 'easeInOut' | 'quadIn' | 'quadOut' | 'quadInOut' | 'expIn' | 'expOut' | 'expInOut' | 'circIn' | 'circOut' | 'circInOut' | 'backIn' | 'backOut' | 'backInOut' | 'elasticIn' | 'elasticOut' | 'elasticInOut' | 'bounceIn' | 'bounceOut' | 'bounceInOut';
+    type Target = 'x' | 'y' | 'width' | 'height' | 'opacity' | 'scale' | 'rotate' | 'borderRadius' | 'borderRadiusTop' | 'borderRadiusBottom';
+    type Bindings = Partial<Record<Target, InterpolatorOptions>>;
+}
+type GetTransformersResult = {
+    motionValues: Partial<Record<useTransforms.Target, MotionValue>>;
+    transformerMap: Transformers;
+};
+type Transformers = Partial<Record<useTransforms.Target, Transformer>>;
+type Transformer = {
+    motionValue: MotionValue;
+    transform: Transform<number, any>;
+};
+type GetTransformersArgs = Pick<useTransforms.Args, 'bindings' | 'containerSize' | 'elementSize' | 'disabled'>;
+export declare function getTransformers({ bindings, containerSize, elementSize, disabled }: GetTransformersArgs): GetTransformersResult;
+export {};

package/dist/client/transitions/parallax/useTransforms.js

@@ -0,0 +1,176 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTransforms = useTransforms;
+exports.getTransformers = getTransformers;
+const d3 = __importStar(require("d3-ease"));
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const hooks_1 = require("../../hooks");
+// hook
+function useTransforms({ progress, bindings: _bindings, containerSize: _containerSize, elementSize: _elementSize, disabled = false }) {
+    // create interpolators (cache unless container/elements change dimensions
+    const bindings = (0, hooks_1.useLatestValue)(_bindings);
+    const containerSize = (0, hooks_1.useLatestValue)(_containerSize);
+    const elementSize = (0, hooks_1.useLatestValue)(_elementSize);
+    const { motionValues, transformerMap } = (0, react_2.useMemo)(() => getTransformers({ bindings, containerSize, elementSize, disabled }), [bindings, containerSize, elementSize, disabled]);
+    // pipe progress to motion values
+    (0, react_2.useEffect)(() => {
+        // skip if disabled
+        if (disabled) {
+            return;
+        }
+        // create updater
+        const transformers = Object.values(transformerMap);
+        const update = (progress) => {
+            transformers.forEach(({ motionValue, transform }) => motionValue.set(transform(progress)));
+        };
+        // set initial values
+        update(progress.get());
+        // captures updates
+        progress.on('change', update);
+    }, [progress, transformerMap, disabled]);
+    // clean up motion values on unmount
+    (0, react_2.useEffect)(() => {
+        return () => Object.values(motionValues)
+            .forEach(motionValue => motionValue.destroy());
+    }, [motionValues]);
+    // return motion values
+    return motionValues;
+}
+function getTransformers({ bindings, containerSize, elementSize, disabled = false }) {
+    // clear bindings if disabled
+    if (disabled) {
+        return { motionValues: {}, transformerMap: {} };
+    }
+    // or build transformers map
+    return Object.entries(bindings)
+        .reduce((transformers, [targetId, options]) => {
+        // create base transform
+        const { scale, from = [0, 1], to, ease = 'linear' } = options;
+        const range = getRange({ scale, containerSize, elementSize });
+        const normalize = (0, react_1.interpolate)(from, to, { ease: getEasingFn(ease) });
+        // apply range multiplier (if possible/required)
+        let transform = normalize;
+        if (range !== undefined) {
+            transform = (progress) => normalize(progress) * range;
+        }
+        // capture interpolator
+        const target = targetId;
+        const motionValue = createMotionValue(options);
+        transformers.motionValues[target] = motionValue;
+        transformers.transformerMap[target] = {
+            motionValue,
+            transform
+        };
+        // keep reducing
+        return transformers;
+    }, { motionValues: {}, transformerMap: {} });
+}
+function createMotionValue(options) {
+    return (0, react_1.motionValue)(0);
+}
+function getRange({ scale, containerSize, elementSize }) {
+    switch (scale) {
+        case 'container-x':
+            return containerSize.width;
+        case 'container-y':
+            return containerSize.height;
+        case 'space-x':
+            return containerSize.width - elementSize.width;
+        case 'space-y':
+            return containerSize.height - elementSize.height;
+        case 'item-x':
+            return elementSize.width;
+        case 'item-y':
+            return elementSize.height;
+        default:
+            return undefined;
+    }
+}
+function getEasingFn(easing) {
+    switch (easing) {
+        case 'sineIn':
+            return d3.easeSinIn;
+        case 'sineOut':
+            return d3.easeSinOut;
+        case 'sineInOut':
+            return d3.easeSinInOut;
+        case 'easeIn':
+            return d3.easeCubicIn;
+        case 'easeOut':
+            return d3.easeCubicOut;
+        case 'easeInOut':
+            return d3.easeCubicInOut;
+        case 'quadIn':
+            return d3.easeQuadIn;
+        case 'quadOut':
+            return d3.easeQuadOut;
+        case 'quadInOut':
+            return d3.easeQuadInOut;
+        case 'expIn':
+            return d3.easeExpIn;
+        case 'expOut':
+            return d3.easeExpOut;
+        case 'expInOut':
+            return d3.easeExpInOut;
+        case 'circIn':
+            return d3.easeCircleIn;
+        case 'circOut':
+            return d3.easeCircleOut;
+        case 'circInOut':
+            return d3.easeCircleInOut;
+        case 'backIn':
+            return d3.easeBackIn;
+        case 'backOut':
+            return d3.easeBackOut;
+        case 'backInOut':
+            return d3.easeBackInOut;
+        case 'elasticIn':
+            return d3.easeElasticIn;
+        case 'elasticOut':
+            return d3.easeElasticOut;
+        case 'elasticInOut':
+            return d3.easeElasticInOut;
+        case 'bounceIn':
+            return d3.easeBounceIn;
+        case 'bounceOut':
+            return d3.easeBounceOut;
+        case 'bounceInOut':
+            return d3.easeBounceInOut;
+        default:
+            return d3.easeLinear;
+    }
+}

package/dist/client/transitions/reveal/Reveal.d.ts

@@ -0,0 +1,14 @@
+import React, { HTMLElementType, ReactNode } from 'react';
+import { useInViewport } from '../../hooks';
+export declare function Reveal({ as, threshold, padding, children }: Reveal.Props): React.DetailedReactHTMLElement<{
+    id: string;
+    ref: import("motion-dom").AnimationScope<any>;
+}, any>;
+export declare namespace Reveal {
+    type Props = {
+        as?: HTMLElementType;
+        children: ReactNode;
+        threshold?: useInViewport.Threshold;
+        padding?: useInViewport.Padding;
+    };
+}

package/dist/client/transitions/reveal/Reveal.js

@@ -0,0 +1,75 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Reveal = Reveal;
+const react_1 = require("motion/react");
+const react_2 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+// component
+function Reveal({ as = 'div', threshold = 'some', padding, children }) {
+    // bind hooks
+    const containerId = (0, react_2.useId)();
+    const [scope, animate] = (0, react_1.useAnimate)();
+    const [visible, initial] = (0, hooks_1.useInViewport)({
+        targetRef: scope,
+        targetId: containerId,
+        once: true,
+        threshold,
+        padding
+    });
+    // animate on entry
+    (0, react_2.useEffect)(() => {
+        // skip if visibility is unknown
+        if (visible === undefined) {
+            return;
+        }
+        // set initial state
+        else if (initial) {
+            // set initial state
+            animate(scope.current, {
+                y: visible ? 0 : 200,
+                opacity: visible ? 1 : 0
+            }, { duration: 0 });
+        }
+        // or animate
+        else if (visible) {
+            animate(scope.current, { y: 0 }, { duration: 0.5, ease: 'easeInOut' });
+            animate(scope.current, { opacity: 1 }, { duration: 0.3, ease: 'easeIn' });
+        }
+    }, [containerId, visible, initial, scope, animate]);
+    // render
+    return react_2.default.createElement(as, { id: containerId, ref: scope }, children);
+}

package/dist/client/transitions/reveal/RevealAnimation.d.ts

@@ -0,0 +1,17 @@
+export declare namespace RevealAnimation {
+    type Attribute = 'x' | 'y' | 'opacity';
+    type Options = {
+        selector: string;
+        delay?: number;
+        duration: number;
+        attribute: Attribute;
+        from: number;
+        to: number;
+        parallel?: boolean;
+    };
+    type InitialStateOptions = Omit<Options, 'delay' | 'duration' | 'to' | 'parallel'>;
+    type ConfigurableOptions = {
+        delay?: number;
+        duration?: number;
+    };
+}

package/dist/client/transitions/reveal/RevealAnimation.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/client/transitions/reveal/RevealAnimator.d.ts

@@ -0,0 +1,13 @@
+import { RevealAnimation } from './RevealAnimation';
+import { RevealElementAnimator } from './RevealElementAnimator';
+type RevealFactory = (animator: RevealElementAnimator) => void;
+export declare class RevealAnimator {
+    private readonly animationList;
+    private constructor();
+    static sequence(factory: RevealFactory): RevealAnimator;
+    sequence(factory: RevealFactory): RevealAnimator;
+    static parallel(factory: RevealFactory): RevealAnimator;
+    parallel(factory: RevealFactory): RevealAnimator;
+    build(): RevealAnimation.Options[];
+}
+export {};

package/dist/client/transitions/reveal/RevealAnimator.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RevealAnimator = void 0;
+const RevealElementAnimator_1 = require("./RevealElementAnimator");
+class RevealAnimator {
+    constructor(initialAnimationList = []) {
+        this.animationList = initialAnimationList;
+    }
+    static sequence(factory) {
+        // create new animation builder
+        const animator = new RevealAnimator();
+        // invoke sequence and return builder
+        return animator.sequence(factory);
+    }
+    sequence(factory) {
+        // create new animator
+        const animator = new RevealElementAnimator_1.RevealElementAnimator();
+        // execute animation factory
+        factory(animator);
+        // return new builder with accumulated list of animations
+        return new RevealAnimator(this.animationList.concat(animator.animationList));
+    }
+    static parallel(factory) {
+        // create new animation builder
+        const animator = new RevealAnimator();
+        // invoke parallel and return builder
+        return animator.parallel(factory);
+    }
+    parallel(factory) {
+        // create new animator with runInParallel - true
+        const animator = new RevealElementAnimator_1.RevealElementAnimator(true);
+        // execute animation factory
+        factory(animator);
+        // return new builder with accumulated list of animations
+        return new RevealAnimator(this.animationList.concat(animator.animationList));
+    }
+    build() {
+        return this.animationList;
+    }
+}
+exports.RevealAnimator = RevealAnimator;

package/dist/client/transitions/reveal/RevealController.d.ts

@@ -0,0 +1,13 @@
+import { RevealAnimation } from './RevealAnimation';
+import { MixedResponsiveValue } from '@nascentdigital/funnel-core';
+export declare function RevealController({ scroller, targetContainer, inViewTrigger, percentVisible, triggerOffsetPx, animations, }: RevealController.Props): null;
+export declare namespace RevealController {
+    type Props = {
+        scroller?: string;
+        targetContainer: string;
+        inViewTrigger?: string;
+        triggerOffsetPx?: MixedResponsiveValue<number>;
+        percentVisible?: MixedResponsiveValue<number>;
+        animations: MixedResponsiveValue<RevealAnimation.Options[]>;
+    };
+}