Offset for Depth?
Closed this issue · 5 comments
Hello,
I was wondering if we can set up offset for the degree at type "depth"/"depth_inv"?
As example if I set offsetY to "0.5":
If the image is center of the screen, then it should show 0deg at rotateX. If the image is top of the screen, then rotateX should go in positive value and if its bottom, then it should go to negative value.
Example usage:
<kinesis-container event="scroll">
<kinesis-element :strength="40" type="depth" axis="y" offsetY="0.5">
<img src="https://via.placeholder.com/600x400"/>
</kinesis-element>
</kinesis-container>Thanks,
Yan
Hello Yan,
Thank you for your question. Actually the feature was available but wasn't active for the scroll event. I fixed it and created a Codesandbox so you can play around with it and confirm that I understood your issue and that it solves it.
So, to explain instead of offsetY the prop is called originY. It might be a bit counter-intuitive. But what it means, basically, is that when :originY=50, your element will be displayed at its initial (original) state when in the middle of the screen, and the transformations will happen when above or under 50 symetrically.
You'll need the 1.1.5 version in order to be able to use this fix.
Hey Aminerman,
Yup, the example from Codesandbox is the exactly the feature which I wanted! That's awesome!
Yeah I thought it was originY at first, but it didn't worked, so I thought it was something else. 😅
The version 1.1.5 is not out yet. So I assume this will be released soon?
Thank you so much,
Yan
The new update is out and it is working perfectly fine. I'll close this issue. Thank you so much for the fast reply + fix!! 👏
Great! You're welcome. It was already available yesterday as it's the version I used for the Codesandbox example.
Glad that you can make it work. And do not hesitate if you have any other queries, ideas or whatever.
Sure, I may have some ideas which I may create new issue for that. 👍