- 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 Modules 006

  Animation observer; Scrollytelling: Fourth canvas

  Related files:

  - Scrollytelling - main demo

      import {
          loader,
          calculateTargetPosition,
          reducedMotionFunctions,
          staticPlaceholderCorrection,
      } from './demo-m006-utils.js';

      export default function (items) {

- §

  #### Proceed checks

          const { canvas, namespace, scrawl } = items;

          if (!(canvas && namespace && scrawl)) return {
              animation: null,
              kill: () => {},
          }

- §

  #### Boilerplate

          const name = item => `${namespace}-${item}`;

          const assets = loader(canvas, scrawl);
          console.log(namespace, assets);

- §

  #### Scene

          const targetPos = calculateTargetPosition(assets.target, 5);

          canvas.set({
              label: 'The canvas displays an image of statues in a cemetery (Havana, Cuba). As the user scrolls through the page the image moves to focus on particular points of interest',
          }).setAsCurrentCanvas();

          canvas.setBase({
              backgroundColor: 'yellow',
          });

          const base = canvas.base;

          const angelAsset = assets.angels;
          const angelDimensions = angelAsset.intrinsicDimensions[angelAsset.currentFile];

          const angelsGroup = scrawl.makeGroup({
              name: name('angels-group'),
              host: canvas.get('baseName'),
          });

          const angels = scrawl.makePicture({
              name: name('angels'),
              group: angelsGroup,
              dimensions: angelDimensions,
              copyDimensions: angelDimensions,
              asset: angelAsset,
              scale: (2 / 3),
              start: ['center', 'center'],
              handle: ['55%', '50%'],
              memoizeFilterOutput: true,
          });

          const filter = scrawl.makeFilter({
              name: name('angel-filter'),
              method: 'notgreen',
              opacity: 0,
          });

- §

  #### Animation

          const ticker = scrawl.makeTicker({
              name: name('ticker'),
              cycles: 0,
              duration: 1000,
          });

          scrawl.makeTween({
              name: name('tween-1'),
              ticker: name('ticker'),
              time: 0,
              duration: 300,
              targets: angels,
              definitions: [{
                  attribute: 'scale',
                  start: (2 / 3),
                  end: 1,
                  engine: 'easeOutIn',
              }],
          }).clone({
              name: name('tween-2'),
              time: 50,
              duration: 300,
              definitions: [{
                  attribute: 'handleY',
                  start: '50%',
                  end: '35%',
                  engine: 'easeOutIn',
              }],
          }).clone({
              name: name('tween-3'),
              time: 150,
              duration: 300,
              definitions: [{
                  attribute: 'handleX',
                  start: '55%',
                  end: '40%',
                  engine: 'easeOutIn',
              }],
          }).clone({
              name: name('tween-4'),
              time: 350,
              duration: 200,
              definitions: [{
                  attribute: 'handleY',
                  start: '35%',
                  end: '65%',
                  engine: 'easeOutIn',
              }],
          }).clone({
              name: name('tween-5'),
              time: 450,
              duration: 300,
              definitions: [{
                  attribute: 'handleX',
                  start: '40%',
                  end: '68%',
                  engine: 'easeOutIn',
              }],
          }).clone({
              name: name('tween-6'),
              time: 600,
              duration: 200,
              definitions: [{
                  attribute: 'handleY',
                  start: '65%',
                  end: '55%',
                  engine: 'easeOutIn',
              }],
          }).clone({
              name: name('tween-7'),
              time: 700,
              duration: 200,
              definitions: [{
                  attribute: 'scale',
                  start: 1,
                  end: 2,
                  engine: 'easeOutIn',
              }],
          }).clone({
              name: name('tween-8'),
              time: 800,
              duration: 200,
              definitions: [{
                  attribute: 'roll',
                  start: 0,
                  end: 50,
                  engine: 'easeOutIn',
              }],
          }).clone({
              name: name('tween-9'),
              targets: filter,
              time: 850,
              duration: 150,
              definitions: [{
                  attribute: 'opacity',
                  start: 0,
                  end: 1,
              }],
          });

          scrawl.makeAction({
              name: name('filter-action-main'),
              ticker: name('ticker'),
              time: 850,
              action: () => base.addFilters(filter),
              revert: () => base.removeFilters(filter),
          });

          scrawl.addNativeListener('focus', () => {
              angels.set({
                  scale: (2 / 3),
                  roll: 0,
                  handle: ['55%', '50%'],
              });
              base.set({
                  filters: [],
              });
              filter.set({
                  opacity: 0,
              });
          }, assets.target);

          const commence = () => ticker.seekTo(targetPos());

          const staticGroup = scrawl.makeGroup({
              name: name('static-group'),
              host: canvas.get('baseName'),
          });

          const placeholder = scrawl.makePicture({
              name: name('static-angels-image'),
              group: staticGroup,
              start: ['center', 'center'],
              handle: ['center', 'center'],
              dimensions: ['100%', '100%'],
              copyDimensions: ['100%', '100%'],
              asset: assets.placeholder,
          });

          const placeholderCorrection = staticPlaceholderCorrection(placeholder)
          const halt = () => placeholderCorrection();

          const animation = scrawl.makeRender({
              name: name('animation'),
              target: canvas,
              observer: true,
          });

- §

  #### Accessibility - reduced-motion preference

          const reducedMotion = reducedMotionFunctions({
              fixed: staticGroup,
              animated: angelsGroup,
              commence,
              halt,
              animation,
          });

          canvas.set({ ...reducedMotion });

- §

  #### Return object

          return {
              animation,
              kill: () => scrawl.library.purge(namespace),
          };
      }