- Jump To … +
  ./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/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/text-snippet-helper.js ./demo/snippets/word-highlighter-snippet.js ./demo/snippets/worley-text-gradient-snippet.js

- §

  # Demo Snippets 001

  Scrawl-canvas DOM element snippets

  Related files:

  - DOM element snippets - main module
  - Spotlight text snippet
  - Jazzy button snippet
  - Page performance snippet

  ### ‘Page performance’ reporter

  Purpose: (roughly) measure and display the time taken between calls to RequestAnimationFrame, and the resultant animated frames-per-second performance of the web page.

  Function input: an empty <div> element.

  Function output: true if snippet builds; false otherwise

  ##### Usage example:

      import { pagePerformance } from './relative/or/absolute/path/to/this/page-performance-snippet.js';

      let myElements = document.querySelectorAll('.some-class');

      myElements.forEach(el => pagePerformance(scrawl, el));

- §

  Effects on the element:

  - updates the <div> element’s `innerHTML` data, which will replace any child elements or text placed between the element’s opening and closing tags.

      export default function (scrawl, el) {

- §

  Define the report function that will record the time taken for each Display cycle animation

          const report = function () {

              let testTicker = Date.now(),
                  testTime, testNow,
                  averageTime = 0;

              const testMessage = document.querySelector(`#${el.id}`),
                  history = [];

              const addTime = (t) => {

                  if (history.length > 20) history.shift();
                  history.push(t);
                  averageTime = history.reduce((p, c) => p + c, 0);
                  averageTime /= history.length;
              }

              return function () {

                  testNow = Date.now();
                  testTime = testNow - testTicker;
                  testTicker = testNow;

                  addTime(testTime);

                  testMessage.textContent = `Screen refresh: ${Math.ceil(averageTime)}ms; fps: ${Math.floor(1000 / averageTime)}`;
              };
          }();

- §

  Apply the snippet to the DOM element

          const snippet = scrawl.makeSnippet({
              domElement: el,
              animationHooks: {
                  afterShow: report,
              },
              includeCanvas: false,
          })

- §

  The return value for this snippet is a boolean, not a JS Object containing links to major actors/actions in the snippet

          return (snippet) ? true : false;
      }