Sticky navbar with scrolltrigger and loco

[christof]

I would like to know if it is possible to use this type of effect by combining locomotive scroll and scroll trigger 

 

See the Pen dyJLWwE by christophedelamare (@christophedelamare) on CodePen

 

I managed to get the locomotive scroll and scroll trigger to work together but I don't see how it is possible to reproduce the effect. wish with the virtual scroll 

If anyone can point me in the direction of a possible solution I would be very pleased 

See the Pen rNJWvBd by christophedelamare (@christophedelamare) on CodePen

[GreenSock]

LocomotiveScroll isn't a GreenSock product, so we can't really support it here - is there a reason you're not just using ScrollSmoother instead?:

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

[christof]

Thank you very much for this answer, I hadn't updated myself on the new greensock, I will definitely use it on my next projects! 

I've taken my sticky bar out of the scroll locomotive container so I don't have to worry about that anymore.

So I modified my code like this 

 

See the Pen zYRNYmP by christophedelamare (@christophedelamare) on CodePen

 

I have one last question, how can I create a scroll effect with the texts rather than a brutal replacement?

[GreenSock]

11 hours ago, christof said:

I have one last question, how can I create a scroll effect with the texts rather than a brutal replacement?

I'm not sure I understand your goal correctly, but I could imagine multiple ways of doing this: 

1. Put all the text blurbs stacked inside that red sticky bar (so only one shows at a time) and then fire off an animation of the "y" property of the container to "scroll" them. 
2. Only have two elements, one that's entering and one that's exiting. Dynamically populate them and animate them as you need (again, the "y" or "yPercent" property)

Good luck!