- 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 004

  Snippets included in the Scrawl-canvas demo/snippets folder

  Related files:

  - Snippets included in the Scrawl-canvas demo/snippets folder
  - Animated hover gradient snippet
  - Animated word gradient snippet
  - Green box snippet
  - Jazzy button snippet
  - Page performance snippet
  - Pan image snippet
  - Placeholder effect snippet
  - Ripple effect snippet
  - Spotlight text snippet
  - Word highlighter snippet
- §

  ### ‘Animated hover gradient’ snippet

  Purpose: adds a gradient behind the words, which animates on user hover over the <span> (or similar) element.

  Function input:

  - the DOM element - generally a block or inline-block element.

  Function output: a Javascript object will be returned, containing the following attributes

      {
          element     // the Scrawl-canvas wrapper for the DOM element supplied to the function
          canvas      // the Scrawl-canvas wrapper for the snippet's canvas
          animation   // the Scrawl-canvas animation object
          demolish    // remove the snippet from the Scrawl-canvas library
      }

  ##### Usage example:

      import hoverGradient from './relative/or/absolute/path/to/this/file.js';

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

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

- §

  Effects on the element:

  - no additional effects on the DOM element
  - setting any background fill on the DOM element will hide the snippet canvas, unless it is deliberately brought forward

      export default function (scrawl, el) {

- §

  Apply the snippet to the DOM element

          const snippet = scrawl.makeSnippet({
              domElement: el,
          });

          if (snippet) {

- §

  Set some convenience variables

              const canvas = snippet.canvas,
                  group = canvas.base.name,
                  animation = snippet.animation,
                  wrapper = snippet.element,
                  name = wrapper.name;

              const animatedGradient = scrawl.makeRadialGradient({
                  name: `${name}-gradient`,
                  start: [0, 0],
                  end: [0, 0],
                  endRadius: '120%',
                  paletteStart: 0,
                  paletteEnd: 99,
                  delta: {
                      paletteStart: -3,
                      paletteEnd: -3,
                  },
                  cyclePalette: true,
              })
              .updateColor(0, 'orange')
              .updateColor(99, 'orange')
              .updateColor(100, 'red')
              .updateColor(299, 'red')
              .updateColor(300, 'lightblue')
              .updateColor(499, 'lightblue')
              .updateColor(500, 'gold')
              .updateColor(699, 'gold')
              .updateColor(700, 'green')
              .updateColor(899, 'green')
              .updateColor(900, 'orange')
              .updateColor(999, 'orange');

              scrawl.makeBlock({
                  name: `${name}-block`,
                  group,
                  dimensions: ['100%', '100%'],
                  fillStyle: `${name}-gradient`,
                  method: 'fill',
              });

              animation.set({
                  commence: function () {
                      if (canvas.here.active) animatedGradient.updateByDelta();
                  },
              });
          }

- §

  Return the snippet, so coders can access the snippet’s parts - in case they need to tweak the output to meet the web page’s specific requirements

          return snippet;
      }