[{"data":1,"prerenderedAt":999},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fmigration":3},{"id":4,"title":5,"body":6,"description":990,"extension":991,"meta":992,"navigation":993,"path":994,"rawbody":995,"seo":996,"stem":997,"__hash__":998},"docs\u002Fdocs\u002Fmigration.md","Migrating",{"type":7,"value":8,"toc":978},"minimark",[9,22,27,117,121,211,267,311,346,351,520,524,583,633,637,647,708,712,725,775,779,794,798,804,807,831,974],[10,11,12,13,17,18,21],"p",{},"Kinesis 2 replaces containers, element types, and ",[14,15,16],"code",{},"data-ks-*"," attributes with a scope and CSS properties. Keep your markup, add ",[14,19,20],{},"data-kinesis"," to the container, and move each option into CSS.",[23,24,26],"h2",{"id":25},"what-changed","What changed",[28,29,30,56,62,97,107],"ul",{},[31,32,33,37,38,41,42,41,45,48,49,52,53,55],"li",{},[34,35,36],"strong",{},"One container attribute."," ",[14,39,40],{},"data-kinesistransformer",", ",[14,43,44],{},"data-kinesisdepth",[14,46,47],{},"data-kinesisaudio",", and ",[14,50,51],{},"data-kinesispath"," become ",[14,54,20],{},".",[31,57,58,61],{},[34,59,60],{},"No element attributes."," Behavior goes in CSS on your own class names, where media queries and tokens apply.",[31,63,64,37,67,70,71,74,75,80,81,41,84,41,87,41,90,93,94,55],{},[34,65,66],{},"Springs instead of durations.",[14,68,69],{},"data-ks-duration"," and ",[14,72,73],{},"data-ks-easing"," become a ",[76,77,79],"a",{"href":78},"\u002Fdocs\u002Fmotion\u002F","motion preset",": ",[14,82,83],{},"soft",[14,85,86],{},"smooth",[14,88,89],{},"snappy",[14,91,92],{},"bouncy",", or ",[14,95,96],{},"heavy",[31,98,99,102,103,106],{},[34,100,101],{},"No throttling."," Kinesis samples input once per frame and stops when idle. ",[14,104,105],{},"data-ks-throttle"," has no replacement.",[31,108,109,112,113,116],{},[34,110,111],{},"Your transforms stay."," Kinesis 1 overwrote ",[14,114,115],{},"transform",". Kinesis 2 never writes it.",[23,118,120],{"id":119},"kinesis-1","Kinesis 1",[122,123,128],"pre",{"className":124,"code":125,"language":126,"meta":127,"style":127},"language-html shiki shiki-themes github-dark-default","\u003C!-- Kinesis 1 -->\n\u003Cdiv data-kinesistransformer data-ks-duration=\"1000\">\n  \u003Cdiv data-kinesistransformer-element data-ks-strength=\"20\" data-ks-transform=\"translate\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[14,129,130,139,167,201],{"__ignoreMap":127},[131,132,135],"span",{"class":133,"line":134},"line",1,[131,136,138],{"class":137},"sH3jZ","\u003C!-- Kinesis 1 -->\n",[131,140,142,146,150,154,157,160,164],{"class":133,"line":141},2,[131,143,145],{"class":144},"sZEs4","\u003C",[131,147,149],{"class":148},"sPWt5","div",[131,151,153],{"class":152},"sFSAA"," data-kinesistransformer",[131,155,156],{"class":152}," data-ks-duration",[131,158,159],{"class":144},"=",[131,161,163],{"class":162},"s9uIt","\"1000\"",[131,165,166],{"class":144},">\n",[131,168,170,173,175,178,181,183,186,189,191,194,197,199],{"class":133,"line":169},3,[131,171,172],{"class":144},"  \u003C",[131,174,149],{"class":148},[131,176,177],{"class":152}," data-kinesistransformer-element",[131,179,180],{"class":152}," data-ks-strength",[131,182,159],{"class":144},[131,184,185],{"class":162},"\"20\"",[131,187,188],{"class":152}," data-ks-transform",[131,190,159],{"class":144},[131,192,193],{"class":162},"\"translate\"",[131,195,196],{"class":144},">\u003C\u002F",[131,198,149],{"class":148},[131,200,166],{"class":144},[131,202,204,207,209],{"class":133,"line":203},4,[131,205,206],{"class":144},"\u003C\u002F",[131,208,149],{"class":148},[131,210,166],{"class":144},[122,212,214],{"className":124,"code":213,"language":126,"meta":127,"style":127},"\u003C!-- Kinesis 2 -->\n\u003Cdiv class=\"scene\" data-kinesis>\n  \u003Cdiv class=\"layer\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[14,215,216,221,240,259],{"__ignoreMap":127},[131,217,218],{"class":133,"line":134},[131,219,220],{"class":137},"\u003C!-- Kinesis 2 -->\n",[131,222,223,225,227,230,232,235,238],{"class":133,"line":141},[131,224,145],{"class":144},[131,226,149],{"class":148},[131,228,229],{"class":152}," class",[131,231,159],{"class":144},[131,233,234],{"class":162},"\"scene\"",[131,236,237],{"class":152}," data-kinesis",[131,239,166],{"class":144},[131,241,242,244,246,248,250,253,255,257],{"class":133,"line":169},[131,243,172],{"class":144},[131,245,149],{"class":148},[131,247,229],{"class":152},[131,249,159],{"class":144},[131,251,252],{"class":162},"\"layer\"",[131,254,196],{"class":144},[131,256,149],{"class":148},[131,258,166],{"class":144},[131,260,261,263,265],{"class":133,"line":203},[131,262,206],{"class":144},[131,264,149],{"class":148},[131,266,166],{"class":144},[122,268,272],{"className":269,"code":270,"language":271,"meta":127,"style":127},"language-css shiki shiki-themes github-dark-default",".scene { --k-motion: soft; }\n.layer { --k-parallax: 20px; }\n","css",[14,273,274,289],{"__ignoreMap":127},[131,275,276,279,282,286],{"class":133,"line":134},[131,277,278],{"class":152},".scene",[131,280,281],{"class":144}," { ",[131,283,285],{"class":284},"sQhOw","--k-motion",[131,287,288],{"class":144},": soft; }\n",[131,290,291,294,296,299,301,304,308],{"class":133,"line":141},[131,292,293],{"class":152},".layer",[131,295,281],{"class":144},[131,297,298],{"class":284},"--k-parallax",[131,300,80],{"class":144},[131,302,303],{"class":152},"20",[131,305,307],{"class":306},"suJrU","px",[131,309,310],{"class":144},"; }\n",[122,312,316],{"className":313,"code":314,"language":315,"meta":127,"style":127},"language-js shiki shiki-themes github-dark-default","\u002F\u002F initializeKinesis() is now:\nimport { initKinesis } from \"@amineyarman\u002Fkinesis\"\ninitKinesis()\n","js",[14,317,318,323,337],{"__ignoreMap":127},[131,319,320],{"class":133,"line":134},[131,321,322],{"class":137},"\u002F\u002F initializeKinesis() is now:\n",[131,324,325,328,331,334],{"class":133,"line":141},[131,326,327],{"class":306},"import",[131,329,330],{"class":144}," { initKinesis } ",[131,332,333],{"class":306},"from",[131,335,336],{"class":162}," \"@amineyarman\u002Fkinesis\"\n",[131,338,339,343],{"class":133,"line":169},[131,340,342],{"class":341},"sc3cj","initKinesis",[131,344,345],{"class":144},"()\n",[347,348,350],"h3",{"id":349},"transformer-elements","Transformer elements",[352,353,354,366],"table",{},[355,356,357],"thead",{},[358,359,360,363],"tr",{},[361,362,120],"th",{},[361,364,365],{},"Kinesis 2",[367,368,369,386,400,412,424,436,448,460,473,498,510],"tbody",{},[358,370,371,381],{},[372,373,374,377,378],"td",{},[14,375,376],{},"data-ks-transform=\"translate\""," + ",[14,379,380],{},"data-ks-strength=\"20\"",[372,382,383],{},[14,384,385],{},"--k-parallax: 20px",[358,387,388,395],{},[372,389,390,377,393],{},[14,391,392],{},"data-ks-transform=\"rotate\"",[14,394,380],{},[372,396,397],{},[14,398,399],{},"--k-spin: 20deg",[358,401,402,407],{},[372,403,404],{},[14,405,406],{},"data-ks-transform=\"tilt\"",[372,408,409],{},[14,410,411],{},"--k-tilt: 10deg",[358,413,414,419],{},[372,415,416],{},[14,417,418],{},"data-ks-transform=\"tilt_inv\"",[372,420,421],{},[14,422,423],{},"--k-tilt: -10deg",[358,425,426,431],{},[372,427,428],{},[14,429,430],{},"data-ks-transform=\"scale\"",[372,432,433],{},[14,434,435],{},"--k-when: near; --k-scale: 1.2",[358,437,438,443],{},[372,439,440],{},[14,441,442],{},"data-ks-transformaxis=\"X\"",[372,444,445],{},[14,446,447],{},"--k-axis: x",[358,449,450,455],{},[372,451,452],{},[14,453,454],{},"data-ks-interactionaxis",[372,456,457],{},[14,458,459],{},"--k-axis",[358,461,462,467],{},[372,463,464],{},[14,465,466],{},"data-ks-transformorigin",[372,468,469,470],{},"plain CSS ",[14,471,472],{},"transform-origin",[358,474,475,480],{},[372,476,477],{},[14,478,479],{},"data-ks-interaction=\"scroll\"",[372,481,482,485,486,41,489,41,492,93,495],{},[14,483,484],{},"--k-when: scroll"," with ",[14,487,488],{},"--k-x",[14,490,491],{},"--k-y",[14,493,494],{},"--k-rotate",[14,496,497],{},"--k-scale",[358,499,500,505],{},[372,501,502],{},[14,503,504],{},"data-ks-perspective",[372,506,507],{},[14,508,509],{},"--k-perspective",[358,511,512,517],{},[372,513,514],{},[14,515,516],{},"data-ks-active=\"false\"",[372,518,519],{},"remove the property, or use a class",[347,521,523],{"id":522},"depth","Depth",[122,525,527],{"className":124,"code":526,"language":126,"meta":127,"style":127},"\u003C!-- Kinesis 1 -->\n\u003Cdiv data-kinesisdepth data-ks-sensitivity=\"15\">\n  \u003Cdiv data-kinesisdepth-element data-ks-depth=\"5\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[14,528,529,533,552,575],{"__ignoreMap":127},[131,530,531],{"class":133,"line":134},[131,532,138],{"class":137},[131,534,535,537,539,542,545,547,550],{"class":133,"line":141},[131,536,145],{"class":144},[131,538,149],{"class":148},[131,540,541],{"class":152}," data-kinesisdepth",[131,543,544],{"class":152}," data-ks-sensitivity",[131,546,159],{"class":144},[131,548,549],{"class":162},"\"15\"",[131,551,166],{"class":144},[131,553,554,556,558,561,564,566,569,571,573],{"class":133,"line":169},[131,555,172],{"class":144},[131,557,149],{"class":148},[131,559,560],{"class":152}," data-kinesisdepth-element",[131,562,563],{"class":152}," data-ks-depth",[131,565,159],{"class":144},[131,567,568],{"class":162},"\"5\"",[131,570,196],{"class":144},[131,572,149],{"class":148},[131,574,166],{"class":144},[131,576,577,579,581],{"class":133,"line":203},[131,578,206],{"class":144},[131,580,149],{"class":148},[131,582,166],{"class":144},[122,584,586],{"className":269,"code":585,"language":271,"meta":127,"style":127},"\u002F* Kinesis 2: tilt the container, lift the children *\u002F\n.scene { --k-tilt: 15deg; }\n.scene .layer { --k-depth: 50px; }\n",[14,587,588,593,612],{"__ignoreMap":127},[131,589,590],{"class":133,"line":134},[131,591,592],{"class":137},"\u002F* Kinesis 2: tilt the container, lift the children *\u002F\n",[131,594,595,597,599,602,604,607,610],{"class":133,"line":141},[131,596,278],{"class":152},[131,598,281],{"class":144},[131,600,601],{"class":284},"--k-tilt",[131,603,80],{"class":144},[131,605,606],{"class":152},"15",[131,608,609],{"class":306},"deg",[131,611,310],{"class":144},[131,613,614,616,619,621,624,626,629,631],{"class":133,"line":169},[131,615,278],{"class":152},[131,617,618],{"class":152}," .layer",[131,620,281],{"class":144},[131,622,623],{"class":284},"--k-depth",[131,625,80],{"class":144},[131,627,628],{"class":152},"50",[131,630,307],{"class":306},[131,632,310],{"class":144},[347,634,636],{"id":635},"distance-items","Distance items",[10,638,639,642,643,646],{},[14,640,641],{},"data-kinesisdistance-item"," becomes a pointer effect or a ",[14,644,645],{},"near"," reaction.",[352,648,649,657],{},[355,650,651],{},[358,652,653,655],{},[361,654,120],{},[361,656,365],{},[367,658,659,671,683,696],{},[358,660,661,666],{},[372,662,663],{},[14,664,665],{},"data-ks-interaction=\"attraction\"",[372,667,668],{},[14,669,670],{},"--k-magnetic: 0.3",[358,672,673,678],{},[372,674,675],{},[14,676,677],{},"data-ks-interaction=\"repulsion\"",[372,679,680],{},[14,681,682],{},"--k-repel: 20px",[358,684,685,692],{},[372,686,687,377,690],{},[14,688,689],{},"data-ks-interaction=\"linear\"",[14,691,430],{},[372,693,694],{},[14,695,435],{},[358,697,698,703],{},[372,699,700],{},[14,701,702],{},"data-ks-startdistance=\"200\"",[372,704,705],{},[14,706,707],{},"--k-radius: 200px",[347,709,711],{"id":710},"scroll-items","Scroll items",[10,713,714,717,718,720,721,724],{},[14,715,716],{},"data-kinesisscroll-item"," becomes ",[14,719,484],{}," for the element crossing the viewport, or ",[14,722,723],{},"--k-when: page"," for the whole document, plus an output:",[122,726,728],{"className":269,"code":727,"language":271,"meta":127,"style":127},".badge {\n  --k-when: scroll;\n  --k-y: 40px -40px;\n}\n",[14,729,730,738,751,770],{"__ignoreMap":127},[131,731,732,735],{"class":133,"line":134},[131,733,734],{"class":152},".badge",[131,736,737],{"class":144}," {\n",[131,739,740,743,745,748],{"class":133,"line":141},[131,741,742],{"class":284},"  --k-when",[131,744,80],{"class":144},[131,746,747],{"class":152},"scroll",[131,749,750],{"class":144},";\n",[131,752,753,756,758,761,763,766,768],{"class":133,"line":169},[131,754,755],{"class":284},"  --k-y",[131,757,80],{"class":144},[131,759,760],{"class":152},"40",[131,762,307],{"class":306},[131,764,765],{"class":152}," -40",[131,767,307],{"class":306},[131,769,750],{"class":144},[131,771,772],{"class":133,"line":203},[131,773,774],{"class":144},"}\n",[347,776,778],{"id":777},"paths","Paths",[10,780,781,782,785,786,789,790,55],{},"Paths are plain CSS ",[14,783,784],{},"offset-path",", driven by ",[14,787,788],{},"--k-progress",". See ",[76,791,793],{"href":792},"\u002Fexamples\u002Fpath\u002F","Along a path",[347,795,797],{"id":796},"audio","Audio",[10,799,800,801,55],{},"Audio is a separate module, used from JavaScript, and can drive any property. See ",[76,802,797],{"href":803},"\u002Fdocs\u002Faudio\u002F",[23,805,806],{"id":806},"vue-kinesis",[10,808,809,812,813,815,816,819,820,823,824,827,828,55],{},[14,810,811],{},"\u003Ckinesis-container>"," becomes an element with ",[14,814,20],{},". ",[14,817,818],{},"\u003Ckinesis-element>"," becomes CSS properties or the ",[14,821,822],{},"v-kinesis"," directive. Register the plugin once with ",[14,825,826],{},"app.use(KinesisPlugin)"," from ",[14,829,830],{},"@amineyarman\u002Fkinesis\u002Fvue",[352,832,833,841],{},[355,834,835],{},[358,836,837,839],{},[361,838,806],{},[361,840,365],{},[367,842,843,854,866,879,891,903,915,927,943,959],{},[358,844,845,849],{},[372,846,847],{},[14,848,811],{},[372,850,851],{},[14,852,853],{},"\u003Cdiv data-kinesis>",[358,855,856,861],{},[372,857,858],{},[14,859,860],{},"\u003Ckinesis-element :strength=\"10\">",[372,862,863],{},[14,864,865],{},"v-kinesis=\"{ parallax: 10 }\"",[358,867,868,873],{},[372,869,870],{},[14,871,872],{},"type=\"depth\"",[372,874,875,878],{},[14,876,877],{},"{ depth: 40 }"," inside a tilted parent",[358,880,881,886],{},[372,882,883],{},[14,884,885],{},"type=\"rotate\"",[372,887,888],{},[14,889,890],{},"{ spin: 20 }",[358,892,893,898],{},[372,894,895],{},[14,896,897],{},"type=\"scale\"",[372,899,900],{},[14,901,902],{},"{ when: 'near', scale: 1.2 }",[358,904,905,910],{},[372,906,907],{},[14,908,909],{},"axis=\"x\"",[372,911,912],{},[14,913,914],{},"{ axis: 'x' }",[358,916,917,922],{},[372,918,919],{},[14,920,921],{},"event=\"scroll\"",[372,923,924],{},[14,925,926],{},"{ when: 'scroll', y: [40, -40] }",[358,928,929,938],{},[372,930,931,934,935],{},[14,932,933],{},":duration"," \u002F ",[14,936,937],{},"easing",[372,939,940],{},[14,941,942],{},"{ motion: 'soft' }",[358,944,945,950],{},[372,946,947],{},[14,948,949],{},"\u003Ckinesis-distance>",[372,951,952,955,956],{},[14,953,954],{},"{ magnetic: 0.3 }"," or ",[14,957,958],{},"{ repel: 20 }",[358,960,961,966],{},[372,962,963],{},[14,964,965],{},"\u003Ckinesis-audio>",[372,967,968,485,971],{},[14,969,970],{},"createAudio()",[14,972,973],{},"bind()",[975,976,977],"style",{},"html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .sPWt5, html code.shiki .sPWt5{--shiki-default:#7EE787}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}",{"title":127,"searchDepth":169,"depth":169,"links":979},[980,981,989],{"id":25,"depth":141,"text":26},{"id":119,"depth":141,"text":120,"children":982},[983,984,985,986,987,988],{"id":349,"depth":169,"text":350},{"id":522,"depth":169,"text":523},{"id":635,"depth":169,"text":636},{"id":710,"depth":169,"text":711},{"id":777,"depth":169,"text":778},{"id":796,"depth":169,"text":797},{"id":806,"depth":141,"text":806},"Move from Kinesis 1 (data attributes) or vue-kinesis (components) to CSS properties and the kinesis() function.","md",{},true,"\u002Fdocs\u002Fmigration","---\ntitle: Migrating\ndescription: Move from Kinesis 1 (data attributes) or vue-kinesis (components) to CSS properties and the kinesis() function.\n---\n\nKinesis 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.\n\n## What changed\n\n- **One container attribute.** `data-kinesistransformer`, `data-kinesisdepth`, `data-kinesisaudio`, and `data-kinesispath` become `data-kinesis`.\n- **No element attributes.** Behavior goes in CSS on your own class names, where media queries and tokens apply.\n- **Springs instead of durations.** `data-ks-duration` and `data-ks-easing` become a [motion preset](\u002Fdocs\u002Fmotion\u002F): `soft`, `smooth`, `snappy`, `bouncy`, or `heavy`.\n- **No throttling.** Kinesis samples input once per frame and stops when idle. `data-ks-throttle` has no replacement.\n- **Your transforms stay.** Kinesis 1 overwrote `transform`. Kinesis 2 never writes it.\n\n## Kinesis 1\n\n```html\n\u003C!-- Kinesis 1 -->\n\u003Cdiv data-kinesistransformer data-ks-duration=\"1000\">\n  \u003Cdiv data-kinesistransformer-element data-ks-strength=\"20\" data-ks-transform=\"translate\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n```html\n\u003C!-- Kinesis 2 -->\n\u003Cdiv class=\"scene\" data-kinesis>\n  \u003Cdiv class=\"layer\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n```css\n.scene { --k-motion: soft; }\n.layer { --k-parallax: 20px; }\n```\n\n```js\n\u002F\u002F initializeKinesis() is now:\nimport { initKinesis } from \"@amineyarman\u002Fkinesis\"\ninitKinesis()\n```\n\n### Transformer elements\n\n| Kinesis 1 | Kinesis 2 |\n| --- | --- |\n| `data-ks-transform=\"translate\"` + `data-ks-strength=\"20\"` | `--k-parallax: 20px` |\n| `data-ks-transform=\"rotate\"` + `data-ks-strength=\"20\"` | `--k-spin: 20deg` |\n| `data-ks-transform=\"tilt\"` | `--k-tilt: 10deg` |\n| `data-ks-transform=\"tilt_inv\"` | `--k-tilt: -10deg` |\n| `data-ks-transform=\"scale\"` | `--k-when: near; --k-scale: 1.2` |\n| `data-ks-transformaxis=\"X\"` | `--k-axis: x` |\n| `data-ks-interactionaxis` | `--k-axis` |\n| `data-ks-transformorigin` | plain CSS `transform-origin` |\n| `data-ks-interaction=\"scroll\"` | `--k-when: scroll` with `--k-x`, `--k-y`, `--k-rotate`, or `--k-scale` |\n| `data-ks-perspective` | `--k-perspective` |\n| `data-ks-active=\"false\"` | remove the property, or use a class |\n\n### Depth\n\n```html\n\u003C!-- Kinesis 1 -->\n\u003Cdiv data-kinesisdepth data-ks-sensitivity=\"15\">\n  \u003Cdiv data-kinesisdepth-element data-ks-depth=\"5\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n```css\n\u002F* Kinesis 2: tilt the container, lift the children *\u002F\n.scene { --k-tilt: 15deg; }\n.scene .layer { --k-depth: 50px; }\n```\n\n### Distance items\n\n`data-kinesisdistance-item` becomes a pointer effect or a `near` reaction.\n\n| Kinesis 1 | Kinesis 2 |\n| --- | --- |\n| `data-ks-interaction=\"attraction\"` | `--k-magnetic: 0.3` |\n| `data-ks-interaction=\"repulsion\"` | `--k-repel: 20px` |\n| `data-ks-interaction=\"linear\"` + `data-ks-transform=\"scale\"` | `--k-when: near; --k-scale: 1.2` |\n| `data-ks-startdistance=\"200\"` | `--k-radius: 200px` |\n\n### Scroll items\n\n`data-kinesisscroll-item` becomes `--k-when: scroll` for the element crossing the viewport, or `--k-when: page` for the whole document, plus an output:\n\n```css\n.badge {\n  --k-when: scroll;\n  --k-y: 40px -40px;\n}\n```\n\n### Paths\n\nPaths are plain CSS `offset-path`, driven by `--k-progress`. See [Along a path](\u002Fexamples\u002Fpath\u002F).\n\n### Audio\n\nAudio is a separate module, used from JavaScript, and can drive any property. See [Audio](\u002Fdocs\u002Faudio\u002F).\n\n## vue-kinesis\n\n`\u003Ckinesis-container>` becomes an element with `data-kinesis`. `\u003Ckinesis-element>` becomes CSS properties or the `v-kinesis` directive. Register the plugin once with `app.use(KinesisPlugin)` from `@amineyarman\u002Fkinesis\u002Fvue`.\n\n| vue-kinesis | Kinesis 2 |\n| --- | --- |\n| `\u003Ckinesis-container>` | `\u003Cdiv data-kinesis>` |\n| `\u003Ckinesis-element :strength=\"10\">` | `v-kinesis=\"{ parallax: 10 }\"` |\n| `type=\"depth\"` | `{ depth: 40 }` inside a tilted parent |\n| `type=\"rotate\"` | `{ spin: 20 }` |\n| `type=\"scale\"` | `{ when: 'near', scale: 1.2 }` |\n| `axis=\"x\"` | `{ axis: 'x' }` |\n| `event=\"scroll\"` | `{ when: 'scroll', y: [40, -40] }` |\n| `:duration` \u002F `easing` | `{ motion: 'soft' }` |\n| `\u003Ckinesis-distance>` | `{ magnetic: 0.3 }` or `{ repel: 20 }` |\n| `\u003Ckinesis-audio>` | `createAudio()` with `bind()` |\n",{"title":5,"description":990},"docs\u002Fmigration","k5Hb8A9jflZeXTqEVewLknZOhO6Qdrcr6d-o3IvnBYo",1791309903106]