Dynamic background colours not working after pinned horizontal scroll section with Scrolltrigger (and Locomotive Scroll)

[Cameron Knight]

Hi again 😀

 

I have come across an issue that I can't seem to find a solution for. When I scroll to the pinned horizontal section, it's like the next sections ignore the pinned section and keep changing colours. I'm finding it hard to explain but you'll see what I mean from the example. Each section should be a different colour but the pinned section is making the dynamic colours change before the next sections.

 

Anyone know what I'm doing wrong?

See the Pen oNzxXzr by cameronknight (@cameronknight) on CodePen

[akapowl]

Hey @Cameron Knight

 

You are just creating your ScrollTriggers in the wrong order. The color-changing ScrollTriggers can't take the pinSpacing of the pinning ScrollTrigger into account, when setting up, because you create the pinning ScrollTrigger after the colorchanging ScrollTriggers. Does that make sense?

 

Just change the order of those functions in your example and you should be good to go.

 

See the Pen 32deacf4cf213f2165acff007fd9c192 by akapowl (@akapowl) on CodePen

 

 

On a sidenote:

Should you have multiple pinning scrolltriggers, you might want to take a look at refreshPriority.

 

Edit:

I just noticed that might confuse more, than clear up things. What I actually wanted to say is: should you ever not be able to create your ScrollTriggers in the 'correct' order for whatever reason (with multiple pins involved e.g.), refreshPriority is what you should have a look at.

 

refreshPriority

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

in the docs.

 

Hope this helps.

 

Cheers,

Paul

 

 

[Cameron Knight]

Paul you did it again! You're always solving my issues for me 🙏 Thanks for spending the time on this and explaining refreshPriority. I was just spending hours tweaking the wrong things but it's such of a silly mistake now that i know the solution. Really appreciate it Paul! 👏