• Jump To … +
    ./demo/canvas-001.js ./demo/canvas-002.js ./demo/canvas-003.js ./demo/canvas-004.js ./demo/canvas-005.js ./demo/canvas-006.js ./demo/canvas-007.js ./demo/canvas-008.js ./demo/canvas-009.js ./demo/canvas-010.js ./demo/canvas-011.js ./demo/canvas-012.js ./demo/canvas-013.js ./demo/canvas-014.js ./demo/canvas-015.js ./demo/canvas-016.js ./demo/canvas-017.js ./demo/canvas-018.js ./demo/canvas-019.js ./demo/canvas-020.js ./demo/canvas-021.js ./demo/canvas-022.js ./demo/canvas-023.js ./demo/canvas-024.js ./demo/canvas-025.js ./demo/canvas-026.js ./demo/canvas-027.js ./demo/canvas-028.js ./demo/canvas-029.js ./demo/canvas-030.js ./demo/canvas-031.js ./demo/canvas-032.js ./demo/canvas-033.js ./demo/canvas-034.js ./demo/canvas-035.js ./demo/canvas-036.js ./demo/canvas-037.js ./demo/canvas-038.js ./demo/canvas-039.js ./demo/canvas-040.js ./demo/canvas-041.js ./demo/canvas-042.js ./demo/canvas-043.js ./demo/canvas-044.js ./demo/canvas-045.js ./demo/canvas-046.js ./demo/canvas-047.js ./demo/canvas-048.js ./demo/canvas-049.js ./demo/canvas-050.js ./demo/canvas-051.js ./demo/canvas-052.js ./demo/canvas-053.js ./demo/canvas-054.js ./demo/canvas-055.js ./demo/canvas-056.js ./demo/canvas-057.js ./demo/canvas-058.js ./demo/canvas-059.js ./demo/canvas-060.js ./demo/canvas-061.js ./demo/canvas-062.js ./demo/canvas-063.js ./demo/canvas-064.js ./demo/canvas-065.js ./demo/canvas-066.js ./demo/canvas-067.js ./demo/canvas-068.js ./demo/canvas-069.js ./demo/canvas-070.js ./demo/canvas-071.js ./demo/canvas-072.js ./demo/canvas-073.js ./demo/canvas-201.js ./demo/canvas-202.js ./demo/canvas-203.js ./demo/canvas-204.js ./demo/canvas-205.js ./demo/canvas-206.js ./demo/canvas-207.js ./demo/canvas-208.js ./demo/canvas-209.js ./demo/canvas-210.js ./demo/canvas-211.js ./demo/canvas-212.js ./demo/delaunator-001.js ./demo/delaunator-002.js ./demo/dom-001.js ./demo/dom-002.js ./demo/dom-003.js ./demo/dom-004.js ./demo/dom-005.js ./demo/dom-006.js ./demo/dom-007.js ./demo/dom-008.js ./demo/dom-009.js ./demo/dom-010.js ./demo/dom-011.js ./demo/dom-012.js ./demo/dom-013.js ./demo/dom-015.js ./demo/dom-016.js ./demo/dom-017.js ./demo/dom-018.js ./demo/dom-019.js ./demo/dom-020.js ./demo/dom-021.js ./demo/filters-001.js ./demo/filters-002.js ./demo/filters-003.js ./demo/filters-004.js ./demo/filters-005.js ./demo/filters-006.js ./demo/filters-007.js ./demo/filters-008.js ./demo/filters-009.js ./demo/filters-010.js ./demo/filters-011.js ./demo/filters-012.js ./demo/filters-013.js ./demo/filters-014.js ./demo/filters-015.js ./demo/filters-016.js ./demo/filters-017.js ./demo/filters-018.js ./demo/filters-019.js ./demo/filters-020.js ./demo/filters-021.js ./demo/filters-022.js ./demo/filters-023.js ./demo/filters-024.js ./demo/filters-025.js ./demo/filters-026.js ./demo/filters-027.js ./demo/filters-028.js ./demo/filters-029.js ./demo/filters-030.js ./demo/filters-031.js ./demo/filters-032.js ./demo/filters-033.js ./demo/filters-034.js ./demo/filters-035.js ./demo/filters-036.js ./demo/filters-037.js ./demo/filters-101.js ./demo/filters-102.js ./demo/filters-103.js ./demo/filters-104.js ./demo/filters-105.js ./demo/filters-501.js ./demo/filters-502.js ./demo/filters-503.js ./demo/filters-504.js ./demo/filters-505.js ./demo/js/mediapipe/tasks-vision/vision-bundle.js ./demo/js/mediapipe/tasks-vision/wasm/vision_wasm_internal.js ./demo/js/mediapipe/tasks-vision/wasm/vision_wasm_nosimd_internal.js ./demo/mediapipe-001.js ./demo/mediapipe-002.js ./demo/mediapipe-003.js ./demo/modules-001.js ./demo/modules-002.js ./demo/modules-003.js ./demo/modules-004.js ./demo/modules-005.js ./demo/modules-006.js ./demo/modules/canvas-minimap.js ./demo/modules/canvas-scene-editor.js ./demo/modules/demo-m006-c1.js ./demo/modules/demo-m006-c2.js ./demo/modules/demo-m006-c3.js ./demo/modules/demo-m006-c4.js ./demo/modules/demo-m006-utils.js ./demo/modules/dom-entity-editor.js ./demo/modules/entity-copy-paste.js ./demo/modules/entity-manipulation-gui.js ./demo/modules/entity-navigation.js ./demo/modules/entity-ring-builder.js ./demo/modules/london-crime-lines.js ./demo/modules/london-crime-stacked-bars.js ./demo/modules/lottie-loader.js ./demo/modules/simple-chart-frame.js ./demo/modules/simple-graph-lines.js ./demo/modules/simple-graph-stacked-bars.js ./demo/modules/wikipedia-views-spiral-chart.js ./demo/packets-001.js ./demo/packets-002.js ./demo/particles-001.js ./demo/particles-002.js ./demo/particles-003.js ./demo/particles-004.js ./demo/particles-005.js ./demo/particles-006.js ./demo/particles-007.js ./demo/particles-008.js ./demo/particles-009.js ./demo/particles-010.js ./demo/particles-011.js ./demo/particles-012.js ./demo/particles-013.js ./demo/particles-014.js ./demo/particles-015.js ./demo/particles-016.js ./demo/particles-017.js ./demo/snippets-001.js ./demo/snippets-002.js ./demo/snippets-003.js ./demo/snippets-004.js ./demo/snippets-005.js ./demo/snippets-006.js ./demo/snippets/animated-highlight-gradient-text-snippet.js ./demo/snippets/animated-hover-gradient-snippet.js ./demo/snippets/animated-word-gradient-snippet.js ./demo/snippets/before-after-slider-infographic.js ./demo/snippets/bubbles-text-snippet.js ./demo/snippets/green-box-snippet.js ./demo/snippets/jazzy-button-snippet.js ./demo/snippets/page-performance-snippet-test.js ./demo/snippets/page-performance-snippet.js ./demo/snippets/pan-image-snippet.js ./demo/snippets/placeholder-effect-snippet.js ./demo/snippets/ripple-effect-snippet.js ./demo/snippets/risograph-text-gradient-snippet.js ./demo/snippets/spotlight-text-snippet-test.js ./demo/snippets/spotlight-text-snippet.js ./demo/snippets/swirling-stripes-text-snippet.js ./demo/snippets/word-highlighter-snippet.js ./demo/snippets/worley-text-gradient-snippet.js ./demo/temp-001.js ./demo/temp-shape-scale-investigation.js ./demo/tensorflow-001.js ./demo/tensorflow-002.js ./demo/utilities.js
  • §

    Demo Modules 006

    Animation observer; Scrollytelling: utility functions

    Related files:

    • Scrollytelling - main demo
  • §

    Asset loader

    Assets are defined in the canvas element/shadow DOM in the HTML file

    export const loader = (canvas, scrawl) => {
    
        const assets = scrawl.library.asset;
    
        const manifest = JSON.parse(canvas.domElement.dataset.manifest);
    
        scrawl.importDomImage(`.${manifest.class}`);
    
        const result = {};
    
        for (const [key, value] of Object.entries(manifest)) {
    
            if (key === 'target') {
    
                result[key] = document.querySelector(value);
            }
    
            else if (key !== 'class') {
    
                result[key] = assets[value];
            }
        }
        return result;
    };
  • §

    Scrollytelling target range

    Scrollytelling often relies on an HTML element remaining sticky withing a parent or neighbour element. We can use the scroll progress of this target element to supply a timeline position which can advance/reverse a set of tweens/actions associated with that timeline in line with the user’s scroll actions

    • target - the HTML element we measure progress on
    • divisor - a Number that represents the height ratio between the target and canvas elements

    Example of working out the divisor value:

    • The canvas has been set to a height of 100vh
    • The target (which contains the canvas) has been set to a height of 400vh
    • Thus the canvas will remain sticky in the viewport for 300vh
    • This means the target’s inViewportTop value (calculated in the function) will range between 0 and -3 while the canvas is sticky
    • Thus the divisor value should be 3
    export const calculateTargetPosition = (target, divisor) => {
    
    
        return function () {
    
            const dims = target.getBoundingClientRect();
    
            const dot = dims.top,
                wih = window.innerHeight,
                inViewportTop = dot / wih;
  • §

    We start the animation after the target top moves above the viewport top

    • which gives us a negative value that we correct here
            let result = (-inViewportTop * 1000) / divisor;
  • §

    We clamp the result to the range 0 - 1000

    • We can now use this for our timeline progression animation
            if (result < 0) result = 0;
            else if (result > 1000) result = 1000;
    
            return result;
        }
    };
  • §

    Reduce motion functionality

    A convenience function to add the reduceMotionAction and noPreferenceMotionAction attributes to a canvas. Takes an Object argument containing the following attributes:

    • fixed - a group containing artefacts that display when the user requests reduced motion, or an Array of such groups
    • animated - a group containing artefacts that display when the user give no preference about reduced motion, or an Array of such groups
    • animation - the animation object
    • commence - a function that handles required animation actions at the start of each Display cycle
    export const reducedMotionFunctions = (items) => {
    
        const {animation, commence } = items;
        let {fixed, animated, halt } = items;
    
        if (!(fixed && animated && animation && commence)) return {};
    
        if (!Array.isArray(fixed)) fixed = [fixed];
        if (!Array.isArray(animated)) animated = [animated];
    
        if (halt == null) halt = () => {};
    
        return {
    
            reduceMotionAction: () => {
    
                fixed.forEach(a => a.setArtefacts({ visibility: true }));
                animated.forEach(a => a.setArtefacts({ visibility: false }));
                animation.set({ commence: halt });
            },
            noPreferenceMotionAction: () => {
    
                fixed.forEach(a => a.setArtefacts({ visibility: false }));
                animated.forEach(a => a.setArtefacts({ visibility: true }));
                animation.set({ commence });
            },
        }
    };
  • §

    Static placeholder correction

    Used to reconcile static image dimensions with canvas dimensions, so the images don’t stretch or distort when shown in the canvas

    export const staticPlaceholderCorrection = (img) => {
    
        let placeholderRatio = 0,
            width = 0,
            height = 0;
    
        return () => {
    
            const [w, h] = img.get('copyDimensions');
    
            if (width !== w || height !== h || !placeholderRatio) {
    
                width = w;
                height = h;
                placeholderRatio = h / w;
    
                if (placeholderRatio < 1) {
    
                    img.set({
                        width: '100%',
                        height: `${100 * placeholderRatio}%`,
                    });
                }
                else {
    
                    img.set({
                        width: `${100 * (w / h)}%`,
                        height: '100%',
                    });
                }
            }
        };
    };