import { loader, reducedMotionFunctions } from './demo-m006-utils.js';
export default function (items) {Animation observer; Scrollytelling: First canvas
Related files:
import { loader, reducedMotionFunctions } from './demo-m006-utils.js';
export default function (items) { const { canvas, namespace, scrawl } = items;
if (!(canvas && namespace && scrawl)) return {
animation: null,
kill: () => {},
} const name = item => `${namespace}-${item}`;
const assets = loader(canvas, scrawl);
console.log(namespace, assets); canvas.set({
label: 'An animated canvas showing three text snippets at the top, center and bottom of the canvas. Each text describes the canvas element\'s current position (from 0% top to 100% bottom) in the browser\' viewport. The texts update as the user scrolls through the page.',
}).setAsCurrentCanvas();
scrawl.makeGradient({
name: name('background-gradient'),
endY: '100%',
colors: [
[0, 'slategray'],
[999, 'darkslategray'],
],
});
scrawl.makeBlock({
name: name('background'),
dimensions: ['100%', '100%'],
fillStyle: name('background-gradient'),
});
const top = scrawl.makeLabel({
name: name('top'),
start: ['center', '5%'],
handle: ['center', 'center'],
fontString: '1em Arial',
fillStyle: 'white',
});
const middle = top.clone({
name: name('middle'),
startY: 'center',
});
const bottom = top.clone({
name: name('bottom'),
startY: '95%',
});
const staticGroup = scrawl.makeGroup({
name: name('static-group'),
host: canvas.get('baseName'),
});
scrawl.makePicture({
name: name('placeholder'),
group: staticGroup,
dimensions: ['100%', '100%'],
copyDimensions: ['100%', '100%'],
asset: assets.placeholder,
}); const commence = () => {
const { inViewportTop, inViewportCenter, inViewportBase } = canvas.here;
top.set({
text: `Canvas top: ${(inViewportTop * 100).toFixed(2)}%`,
});
middle.set({
text: `Canvas center: ${(inViewportCenter * 100).toFixed(2)}%`,
});
bottom.set({
text: `Canvas bottom: ${(inViewportBase * 100).toFixed(2)}%`,
});
};
const animation = scrawl.makeRender({
name: name('animation'),
target: canvas,
observer: true,
}); const reducedMotion = reducedMotionFunctions({
fixed: staticGroup,
animated: canvas.get('baseGroup'),
commence,
animation,
});
canvas.set({ ...reducedMotion }); return {
animation,
kill: () => scrawl.purge(namespace),
};
}