Parallax start position

[lesliecdubs]

Hi there! Great package.

We are running SmoothScroll with parallax with preload set to true. We've got a loading screen that covers the page entirely and only fades out once all the images on the page have loaded and resize() has been called again as per https://github.com/baptistebriel/smooth-scrolling/issues/49.

The challenge we're having is that our hero image has parallax on it, and you can see it visually jump when the parallax transform gets added. Oddly, this seems to be happening several seconds after resize() has been called and the loading screen has faded out.

Is there a way to ensure a parallax element's origin on init is transform3d(0, 0, 0), and those values only increase / change once scrolling has actually begun? If not, do you have any other ideas for how to control for the initial parallax position without seeing a visual jump when parallax inits?

[baptistebriel]

Hey @lesliecdub,

Which demo are you using? I guess it might be parallax-page

The transform value applied here is basically this formula (see this line) :

const transform = ((cache.top + cache.center) - current) * cache.speed

current is the scrollY value cache.top is the top position from the getBoundingClientRect() data that we got on resize. cache.center is the center of the element: getBoundingClientRect().height / 2 cache.speed is the 'data-speed' attribute of the element (something like 0.1)

Based on your description, the hero image should have: cache.top of 0, cache.center of window.innerHeight / 2

If the user didn't scrolled yet, the transform value should be something like:

const transform = ((0 + cache.center) - 0) * 0.1

My guess is that you might see a jump because of the cache.center being added. Otherwise, you should always get a translate3d(0, 0px, 0) if you haven't scrolled yet.

Try replacing this line with:

const transform = (cache.top - current) * cache.speed

Let me know if that's the issue!

[lesliecdubs]

@baptistebriel Thanks so much for the help and explanation!

Changing that line did fix the "jump" I was seeing, and ensured the first parallaxing element began at position translate3d(0, 0px, 0) instead of already translated.

However, it looks like changing that line also added a bit of blank space to the bottom of the page. Do I need to now subtract from the overall page container transform?

[wezzou1]

@baptistebriel

I'm also having some problem with the start-positions, If I exemple reload the page after I scrolled down a little bit, I've got some blank space above, It's seems like it take the value of the content I already scrolled and set cache to it, How do I avoid this type of problem? I want it to have start-positions at translate3d(0,0,0) instead of already translated.