Jump to content


Parallax images using SmoothScroller not working with ScrollTrigger pinned items

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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? 

Link to comment
Share on other sites

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 😅

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.