Migrating

Kinesis 2 replaces containers, element types, and data-ks-* attributes with a scope and CSS properties. Keep your markup, add data-kinesis to the container, and move each option into CSS.

What changed

• One container attribute. data-kinesistransformer, data-kinesisdepth, data-kinesisaudio, and data-kinesispath become data-kinesis.
• No element attributes. Behavior goes in CSS on your own class names, where media queries and tokens apply.
• Springs instead of durations. data-ks-duration and data-ks-easing become a motion preset: soft, smooth, snappy, bouncy, or heavy.
• No throttling. Kinesis samples input once per frame and stops when idle. data-ks-throttle has no replacement.
• Your transforms stay. Kinesis 1 overwrote transform. Kinesis 2 never writes it.

Kinesis 1

<!-- Kinesis 1 -->
<div data-kinesistransformer data-ks-duration="1000">
  <div data-kinesistransformer-element data-ks-strength="20" data-ks-transform="translate"></div>
</div>

<!-- Kinesis 2 -->
<div class="scene" data-kinesis>
  <div class="layer"></div>
</div>

.scene { --k-motion: soft; }
.layer { --k-parallax: 20px; }

// initializeKinesis() is now:
import { initKinesis } from "@amineyarman/kinesis"
initKinesis()

Transformer elements

Depth

<!-- Kinesis 1 -->
<div data-kinesisdepth data-ks-sensitivity="15">
  <div data-kinesisdepth-element data-ks-depth="5"></div>
</div>

/* Kinesis 2: tilt the container, lift the children */
.scene { --k-tilt: 15deg; }
.scene .layer { --k-depth: 50px; }

Distance items

data-kinesisdistance-item becomes a pointer effect or a near reaction.

Scroll items

data-kinesisscroll-item becomes --k-when: scroll for the element crossing the viewport, or --k-when: page for the whole document, plus an output:

.badge {
  --k-when: scroll;
  --k-y: 40px -40px;
}

Paths

Paths are plain CSS offset-path, driven by --k-progress. See Along a path.

Audio

Audio is a separate module, used from JavaScript, and can drive any property. See Audio.

vue-kinesis

<kinesis-container> becomes an element with data-kinesis. <kinesis-element> becomes CSS properties or the v-kinesis directive. Register the plugin once with app.use(KinesisPlugin) from @amineyarman/kinesis/vue.