translate3d creating a blank space

[chaddattilio-lyons]

Might be using this wrong, but the last "rellax" div on the page creates a big blank space on the page as it translates upward. Any ideas?

Thanks for a good simple library!

[moeamaya]

@chaddattilio-lyons Yea this is definitely a problem. I don't have an immediate solution outside of using the centering: true feature.

[thedotmack]

centering: true helps however it no longer centers once the window is resized. I know it's kind of a thing related to responsive testing and not REALLY a real life use case, but it'd be nice to have some function to re-center stuff after the window size has changed.

Additionally I was having an issue with horizontally centering an absolutely positioned box, because the translate3d inline is overriding my CSS for translateX, if these properties were separated out rather than all in one, could help with these types of bugs.

[thewebsitedev]

Checked the demo, translate Y values are negative but when I tried locally translate Y values are positive. This resulted in image staying at the same position as the container div is moved. So I modified the code a bit to get negative values and that fixed the issue for me.

[andreiglingeanu]

@thewebsitedev that negative Y value depends really on the speed you pass. It can be both positive and negative. And if you use center: true -- it gets clamped between -5 and 5.

---

Hey @moeamaya I gave a thought to the problem of the blank spaces being created, specifically when using the center: true option.

Take a look at that picture (sorry for bad drawing, not really good at it):

So,

1. the gray area is the whole page
2. the yellow rectangle is the div that's being moved with translate3d, with center: true
3. green rectangle is a static container and the yellow area gets centered relatively to that particular container

If I understand correctly, the center: true option does just that: Adjusts the translate3d value so that when the user scrolls to the element (our yellow area) and it is being right on the center of the viewport -- it has 0 translation.

That is, in order to make sure we never create a blank space, we have to make sure that X and Y (from the drawing) never become less than zero. And we'll have to adjust the height of the yellow area so that it stays that way -- and we'll need to consider here the speed at which the yellow area is translating up or down.

What I'm looking for, is a simple way of computing those X and Y values, knowing the speed of the parallax.

I think that should somehow push us toward a solution for that issue.

Does any of that make any sense?

[vernondegoede]

I'm not sure if this is the right solution, but this seems to work for me:

In the createBlocks method I store all CSS styles as a property on each block:

    const computedStyle = document.defaultView.getComputedStyle(el);
    const transform = computedStyle.transform;

This will result in a property like: matrix(1, 0, 0, 1, -176, 0). It will be stored in the array of blocks.

Instead of checking for inline styles and placing those in the transform property after the translate3d which results in the following inline CSS property:

transform: translate3d(0px, -22px, 0px) matrix(1, 0, 0, 1, -176, 0)

This property is then set on the element within the animate method:

    // Move that element
    // (Set the new translation and append initial inline transforms.)
    const translate = `translate3d(${
      self.options.horizontal ? positionX : '0'
    }px,${self.options.vertical ? positionY : '0'}px,${zindex}px) ${
      blocks[i].transform
    }`;

[afredericksansait]

Hi @vernondegoede is it still working? Tried it out and it doesn't seem to run. Where exactly in the code is it supposed be placed at?