Dodge
Children slip away from the pointer, then glide home when it rests.
- enhancer
- pointer
- playful
- spring
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Dodge example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<div class="m-dodge" data-motion="dodge"><span>Catch</span><span>me</span><span>if</span><span>you</span><span>can</span></div>import { Dodge } from "./motion/react/Dodge";
<Dodge>Your content</Dodge><script setup lang="ts">
import Dodge from "./motion/vue/Dodge.vue";
</script>
<template>
<Dodge>Your content</Dodge>
</template>const el = document.querySelector("#title");
el.dataset.motion = "dodge";The wrappers: Dodge.tsx (React, TypeScript) and Dodge.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-radius | 90 | how close, in pixels beyond a child's own size, the pointer may come |
data-motion-strength | 1 | how far a child slips (1 keeps it just out of reach) |
data-motion-rest | 900 | milliseconds of a still pointer before the children glide home |
Accessibility
Children move with transforms only, so the layout never changes, and a child that holds keyboard focus never moves away from it. On touch, a tap pushes the children near it, and they come back on their own. Reduced motion: nothing moves.
Size
dodge.js is 1.3 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.