Element with parallax applied always transformed along Y axis when scroll position is 0

[hamishtaplin]

Sorry for the long-winded title. I'm using this library (awesome work btw) to implement a parallax header similar to your example: https://codepen.io/jscottsmith/pen/aVBvGj

My issue is that I want the header to not be transformed at all until the user scrolls, so it sits flush to the top of the viewport. However, even when window.scrollY is 0 there's always some transformY being applied. You can see this even in the codepen above so I'm sure it's not something I'm doing wrong.

Is this by design?

[jscottsmith]

Hmm, it depends on where the element is positioned relative to the viewport window. Would you mind sharing your code with me, or an isolated demo of what your doing? Then I can confirm if it's expected behavior or if something else is up.

Edit: after reading this again I think I get what you are saying, but this is by design. Even though the page hasn't scrolled, the element is within the the viewport (I'm guessing) and receiving some translations. It would only not be translated if it was completely below the viewport (top element edge below bottom edge of view).

This is how the lib applies translations, based on the progress of the element through the viewport. Starts at 0 when top edge is below view, moves to 1 when the element's bottom edge leaves the top. In order to support what I think you asking I'd need to calculate the progress differently, and it would need to be configurable. Perhaps a v2 feature? Not sure about the level of effort, but that version should be a bit more flexible for such use cases.

Also I just added the <ParallaxBanner>, if you wanna try that out, but it will likely be the same issue.

Feel free to still send over an example if you want me to take a look.

[hamishtaplin]

Hi. Here's a preview of what I mean: https://5a8402887b6ee82bc4420066--blacklabfilms.netlify.com/

[jscottsmith]

Thanks. Cool site.

Yes this is expected. The way I'm getting around it it is by expanding the height of the parallax element by the total amount of offset. Given a -10% min offset and 10% max offset, you'd need to expand the height by 20% and position it correctly so the edges are never visible. I'm doing that here in the src for <ParallaxBanner>. I'm also doing something similar in the CodePen originally linked, check the Scss.

You'll have to handle this manually, as <ParallaxBanner> isn't setup to handle video. But I'm think it should be an easy update to allow custom children for each layer. I'll look into supporting this.

Let me know if this helps.