Parallax images using SmoothScroller not working with ScrollTrigger pinned items

[chailandau]

Hi there, I am trying to figure out how to make parallax images using SmoothScroller work with ScrollTrigger pinned items. Currently, the pinned items work great, and if I remove them, both parallax images work great. Currently, the first parallax image works at random times, but the second does not.

 

I see it is being triggered at the wrong time due to the pinned items. I tried adding pinnedContainer to the ScrollSmoother, but that didn't work. Any ideas?

 

 

See the Pen bGLWXdJ by chailandau (@chailandau) on CodePen

[GreenSock]

That's a pretty tricky scenario because you're pinning the container of the effect, throwing off the start/end positions by the distance you pin it. 

 

Here's a fork with some custom logic implemented to solve that in your case: 

See the Pen QWmwwGr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

smoother.effects().forEach(st => {
  let v = st.vars;
  v.pinnedContainer = "main";
  st.vars = null;
  st.init(v, st.animation);
});

Is that what you were looking for? 

[chailandau]

Yes, that is exactly what I wanted. Thank you so much! I thought there might already be a method I was just missing, but it is a really random usecase so it makes sense there isn't 😅