Parallax Sections about smooth-scrolling HOT 5 OPEN

Hi @adamgilmour,

I'm not having the first issue on your demo link — the scroll container does have the desired height value, and I'm able to scroll from the beginning.

One issue I did noticed is the jump of the image. Because we're applying a transform value on it, it seems like to top position is not detected property — it could be because the image is not loaded yet, but since you're using preload: true we shouldn't see this...

One thing you can do is remove the in-viewport detection and just apply the transform all the time. The jump you've seen is because when the element enters the viewport, it applies a transform value of around ~100px. Since it's the first time the transform is applied, the jump occurs.

Try to replace the inViewport function with the following:

inViewport(el, index) {
  if(!this.cache || this.resizing) return
  const cache = this.cache[index]
  const current = this.vars.current
  const transform = ((cache.top + cache.center) - current) * cache.speed
  el.style[this.prefix] = this.getTransform(transform)
}

Let me know if that fixes the issue!

from smooth-scrolling.

Hi @baptistebriel, sorry for the delay, thanks for getting back to me.

I've sorted the first issue - it was because the Webpack setup I'm using was injecting the css via js, meaning smooth-scroll had nothing to base the height calculation on initial load.

With jumping element/image issue I think I had already tried what you've suggested but like you say it continues to transform the element when out of the viewport which may decrease page performance.

I might look into seeing whether I could add another option/data attribute to offer some 'in view' tolerance to each parallax element so you can define when the transforms should run. Do you think this would be possible?

Cheers :)

from smooth-scrolling.

I've managed to get another data attribute working for a tolerance option, works for elements that are already in the viewport but still working on how to activate elements that aren't scrolled into view yet, I'll see how I get on!

One thing I've spent a lot of time on, and got nowhere, is trying to utilise the current code so that it registers when a singular element is in viewport, instead of a collection of elements (such as your parallax demo).
I can get this working fine with an external plugin https://github.com/camwiegert/in-view but would like to use existing code that you've written with getBoundingClientRect(). Ideally I'd like to pass a callback function when the element is in the viewport, in which I can use gsap to animate.

Is this possible?

Cheers :)

from smooth-scrolling.

Hey, @adamgilmour — using in-view from @camwiegert is a good idea. I believe he's using MutationObserver, but you could also use Intersection Observer if you want to look into doing it from scratch.

As of registering a single element — I think you still should do it inside a forEach function, just in case you might want to have other elements later on, your code will work.

I haven't really used this module since a while and mostly just re-write it for the project needs. You can have a look at this most recent code I've been using, if it can help. You might need to do some cleanup before actually using it, but it might be something similar to what you want.

from smooth-scrolling.

Hey adam , I know it has been months. But I wanted to tell you the jumping image thing is because your data-speed=1 . What I did is make it data-speed=0.05 and I can see the image is VERY SLIGHTLY movement when inview hits. Try change your data-speed lower than 0.5 to see slight movement

from smooth-scrolling.