Allow kinesis-element in both sides of the movement like x axis and y axis

[dt2036]

Hello @Aminerman
Is there any solution for both sides of the movement like x axis and y axis in kinesis-element?

  <kinesis-element :strength="10"  axis="y">
    <img loading="lazy" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"
width="300" height="200" alt="Radixweb for Custom Software Development" > 
  </kinesis-element>      

Thanks in advance.

[Aminerman]

@dt2036 I'm not sure I understand correctly. You mean you would like to restrict the movement for both axis at the same time?

[dt2036]

@dt2036 I'm not sure I understand correctly. You mean you would like to restrict the movement for both axis at the same time?

No, I want transition movement left to right and top to bottom vice versa.

[dt2036]

demo.txt
check-in this code pan https://codesandbox.io/s/vue-kinesis-6x3kd app.vue file in replacing the above demo.txt file.
Above code in only axis="y" transition. I want transition movement left to right and top to bottom vice versa.

[Aminerman]

Okay I'll try to rephrase it differently, and you tell me if I understand correctly.

I want transition movement left to right and top to bottom vice versa

You mean you want to be able to transition in both axis at the same time?
Or do you want to have something like axis="xy" to make the movement only go horizontally and vertically?

vice versa

This creates ambiguity. Does it mean you want to revert the movement?
Or you want to change horizontal mouse movement to vertical element movement, and vertical mouse movement to horizontal element movement? Something like mapping x to y and y to x?

[dt2036]

@Aminerman Thanks. my issue is solved. removed axis="y" from my code and my goal is achieved.

[Aminerman]

Oh I get it now.

Yes, the axis prop is only when you want to restrict the movement. You don't need to specify it if you want a free movement.