Aminerman / vue-kinesis

Easily create complex interactive animations with Vue.js
https://www.aminerman.com/kinesis/
MIT License
1.47k stars 59 forks source link

Not able to limit translation during mouse scroll events #60

Closed dr-jared-taylor closed 3 years ago

dr-jared-taylor commented 3 years ago

Limiting movement of objects using the min and max props and type="translate" only works for mouse over move events, but not for scroll events.

In my case, I was able to use minY and maxY props to limit vertical movement within a event="move" kinesis-container, but switching it to event="scroll" disables the minY and maxY props and the objects are no longer constrained vertically (although the originY prop does seem to work for scrolling).

As a side note, it would be really nice to be able to define the vertical movement to move in the opposite direction of the scrolling, although perhaps this was the intent of the minY and maxY props. I would love to have an effect where the objects translate up as I scroll down, and vice versa.

I really appreciate the work you put into Kinesis, and I am enjoying working with it so far!

Aminerman commented 3 years ago

Hello :) thank you for taking time to write a detailed description of your issue. I'm already working on a fix and refactoring some of the code at the same time.

For the movement to go in the opposite direction you just need to specify a negative :strength to your element.

Thanks a lot for your feedback :) it's pleasant to here and it motivates me to keep on working on this project.

I'll let you know when the fix will be pushed. Do not hesitate to let me know if you have any other issue or idea.

dr-jared-taylor commented 3 years ago

Thanks for checking into it! And thanks for mentioning that a negative :strength value can be used. I didn't realize that.

Looking forward to the fix, because it will make what I am working on much easier :)

Aminerman commented 3 years ago

@bionexus I released a new version with the fix