GSAP + Locomotive Scroll Sticky Header not working

[youcci]

Hello Guys,

i'm currently working on a personal site and i was planning on using Locomotive Scroll with GSAP. I was intending to use a sticky/fixed Header and it's for some reason not working. Also i wanted to use mix-blend-mode because i'm switching between black and white backgrounds. So basically i wanted to recreate this codepen: 

See the Pen yLarQOa by martendebruijn (@martendebruijn) on CodePen

 but with Locomotive Scroll and GSAP.

 

My attempt: 

 

Can someone please help me?

Thank you

See the Pen gOLXgaB by youcci (@youcci) on CodePen

[ZachSaucier]

Hey youcci and welcome to the GreenSock forums.

 

You don't need ScrollTrigger to recreate that sort of effect with Locomotive Scroll... But I showed an example of how you could do so in this pen (if you wanted to add additional other scroll based effects - the commented out section):

See the Pen eYBerwQ?editors=1010 by GreenSock (@GreenSock) on CodePen

[Visual-Q]

Can't really give you any advice on loc scroll as I've never used it but is this what you were after? Moving header outside of scroll element seems to work.

 

See the Pen MWbOGMq by Visual-Q (@Visual-Q) on CodePen

 

[youcci]

Thanks guys!