Public
Edited
Feb 6, 2023
{
/** Block 1 */
//export let appID: string;
//export let mouseX: number | null;
let el // HTMLImageElement;
let mouseX // : number | null = null;
/** Block 2 */
const baseWidth = 57.6;
const distanceLimit = baseWidth * 6;
const beyondTheDistanceLimit = distanceLimit + 1;
const distanceInput = [
-distanceLimit,
-distanceLimit / 1.25,
-distanceLimit / 2,
0,
distanceLimit / 2,
distanceLimit / 1.25,
distanceLimit,
];
const widthOutput = [
baseWidth,
baseWidth * 1.1,
baseWidth * 1.618,
baseWidth * 2.618,
baseWidth * 1.618,
baseWidth * 1.1,
baseWidth,
];
let distance = beyondTheDistanceLimit;
let $widthPX = baseWidth;
// spring(baseWidth, {
// damping: 0.38,
// stiffness: 0.1,
// });
// $:
$widthPX = popmotion.interpolate(distanceInput, widthOutput)(distance);
let width //: string;
$: width = `${$widthPX / 16}rem`;
/** Block 3 */
let raf //: number;
function animate(mouseX) { //: number | null
if (el && mouseX !== null) {
const rect = el.getBoundingClientRect();
// get the x coordinate of the img DOMElement's center
// the left x coordinate plus the half of the width
const imgCenterX = rect.left + rect.width / 2;
// difference between the x coordinate value of the mouse pointer
// and the img center x coordinate value
const distanceDelta = mouseX - imgCenterX;
distance = distanceDelta;
return;
}
distance = beyondTheDistanceLimit;
}
// $:
raf = requestAnimationFrame(() => animate(mouseX));
}
popmotion.interpolate(2,4)
popmotion = import('https://cdn.skypack.dev/popmotion@11.0.5?min')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
