Clarify translateY start and end, perhaps with diagrams

[neaumusic]

First of all, I just want to say this project is great, including the examples, the documentation framework, etc

I spent a while today trying to pick up and utilize the Banner implementation, which was actually incredibly easy to get started with.

Unfortunately, I had to translateY to show specific portions of a banner which was already on the page, and coming from regular CSS it was really difficult to wrap my head around. I think clarifying "as the container comes up from the bottom of the page, it can overlap into the window with an offset. Once the element is above the window, it can also be defined with an offset into the page."

I'm not sure if this wording is that great, but this concept took me forever to realize.. I was doing most things backwards and didn't know which boundaries were overlapping in which directions.

Again, thank you for the work you put into this project, this is just a suggestion

[neaumusic]

Also, before I forget, typically blocks expand in height dynamically as contents wrap, but knowing that the banner was a fixed height and that I was working with percentages of that height helped me to realize that the translations I was choosing wouldn't actually depend on device scaling, eg 25% of a 600px banner will always be 150px, even if that 150px is scaled on a device or with the browser zoom.

Mostly I was just very confused about which boundary was being modified in which direction, and I totally forgot that the element actually comes in from the bottom of the page..

[neaumusic]

It seems I'm still very confused about how translateY works and I'm not sure if the interpolation is actually correct

translateY: [10, 0] I expected the image to be 10% higher than it would be entering the window. In this video:

• entering: it's 10% lower than the image would have been at 20%, rather than 0%
• exiting: parameter looks correct, matching at 0 when the bottom hits the top at 0

https://user-images.githubusercontent.com/3423750/197294143-97ff709f-2f97-4abe-b93d-f16ad65d2b38.mov

translateY: [0, -10] the second parameter is adversely affecting the first match point and has shifted an additional 10% upward (assuming negative is supposed to me upward)

• entering: the image does not match at 0, and instead acts as if it were set to 10% higher
• exiting: the image acts as if it were set to -20% rather than -10%

https://user-images.githubusercontent.com/3423750/197294770-c282040b-13b0-4237-a2e1-8e1ba557ed18.mov

[neaumusic]

@jscottsmith I forked and created a branch with a new PallaxBanner story to demo the translateY issue, if you just mess around with [10, 0] [-10, 0] [0, 10] [0, -10] the image should either be leading or trailing the red line at the top or bottom by 10% (I believe)

[jscottsmith]

Hi thanks for the suggestions on the docs, I'll consider them. Also open to PRs if you have specific suggestions.

I don't see any issue with what you've described. It appears to work as intended. It may help you to know that the translateY and all other transforms work just like their CSS counterpart. Taking the translateY: [10, 0] example is starting the parallax element at translateY(10%) which pushes the element down from the top 10% of its height. If you wanted it instead to be pushed upward you'd need a negative value.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY

If you wanna open a discussion to discuss further please open one here so we can keep the issues cleared up.

thanks!

[neaumusic]

@jscottsmith sounds good, I'll open a discussion to clarify the issue a bit and it's good to know they're supposed to be equivalent to css transforms -- pretty much, when using both start and end translation percentages of +/-10 they dont seem to line up correctly with the image actually being +/-10% into the window