2025-01-21 00:34:46 +00:00
|
|
|
<!DOCTYPE html>
|
Updated movement code for performance and accuracy.
This was a learning experience.
The transform controls `rotate`, `scale`, and `translate` have independent CSS names now, so I don't
have to memorize the transformation pattern needed to make them go as expected. On the other hand,
`transition` is still how you describe the speed and easing. And even though they're not
officially transformations, `transitionend` is how you detect when one has completed.
All of the various different techniques for figuring out where something is on the page with respect
to another element can be terribly confusing. Ultimately, I went with offsets-from-viewport, as that
seems to be the most common way of doing the calculations.
Separating `pointermove` from the animation frames used to update the page is a very nifty technique
that I learned from the Svelte guys. `pointermove` only updates an (x,y) coordinate pair that you
keep in memory; as long as you're "tracking a drag," you just update on every available animation
frame, using the last (x,y) pair that it saved. This gives you much smoother animations.
2025-01-21 00:03:18 +00:00
|
|
|
<html lang="en">
|
2025-01-21 00:34:46 +00:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
|
|
|
<meta name="Description" content="Put your description here." />
|
|
|
|
|
<base href="/" />
|
Updated movement code for performance and accuracy.
This was a learning experience.
The transform controls `rotate`, `scale`, and `translate` have independent CSS names now, so I don't
have to memorize the transformation pattern needed to make them go as expected. On the other hand,
`transition` is still how you describe the speed and easing. And even though they're not
officially transformations, `transitionend` is how you detect when one has completed.
All of the various different techniques for figuring out where something is on the page with respect
to another element can be terribly confusing. Ultimately, I went with offsets-from-viewport, as that
seems to be the most common way of doing the calculations.
Separating `pointermove` from the animation frames used to update the page is a very nifty technique
that I learned from the Svelte guys. `pointermove` only updates an (x,y) coordinate pair that you
keep in memory; as long as you're "tracking a drag," you just update on every available animation
frame, using the last (x,y) pair that it saved. This gives you much smoother animations.
2025-01-21 00:03:18 +00:00
|
|
|
|
2025-01-21 00:34:46 +00:00
|
|
|
<style>
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
background-color: #ededed;
|
|
|
|
|
}
|
|
|
|
|
fridge-magnets {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<title>fridge-magnets</title>
|
|
|
|
|
</head>
|
Updated movement code for performance and accuracy.
This was a learning experience.
The transform controls `rotate`, `scale`, and `translate` have independent CSS names now, so I don't
have to memorize the transformation pattern needed to make them go as expected. On the other hand,
`transition` is still how you describe the speed and easing. And even though they're not
officially transformations, `transitionend` is how you detect when one has completed.
All of the various different techniques for figuring out where something is on the page with respect
to another element can be terribly confusing. Ultimately, I went with offsets-from-viewport, as that
seems to be the most common way of doing the calculations.
Separating `pointermove` from the animation frames used to update the page is a very nifty technique
that I learned from the Svelte guys. `pointermove` only updates an (x,y) coordinate pair that you
keep in memory; as long as you're "tracking a drag," you just update on every available animation
frame, using the last (x,y) pair that it saved. This gives you much smoother animations.
2025-01-21 00:03:18 +00:00
|
|
|
|
2025-01-21 00:34:46 +00:00
|
|
|
<body>
|
|
|
|
|
<fridge-magnets></fridge-magnets>
|
|
|
|
|
<script type="module" src="./out-tsc/src/fridge-magnets.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|