ScrollMagic horizontal scroll with anchor navigation

[DD77]

Not sure I'm doing the right thing here but I need the navigation to scroll horizontally.

Also links should be active when the page scrolls... 
What am I missing here?

See the Pen zpOJWB by davide77 (@davide77) on CodePen

[Sahil]

You need to set controller property 'vertical' to false.

 

See the Pen ppzxpR?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[DD77]

@Sahil do you know how do achieve this also with the mouse only? like if I scroll with the mouse the links change?
 

See the Pen opNGQa by davide77 (@davide77) on CodePen

 

[Sahil]

If you want to scroll horizontally on mouse scroll,

 

See the Pen ypLzQM by Sahil89 (@Sahil89) on CodePen

 

If you want to trigger navigation,

 

See the Pen xpxPWe?editors=0011 by Sahil89 (@Sahil89) on CodePen

 

Also, when you fork old pens, make sure to check all files and versions, right now it is using really old versions TweenMax and scrollTo plugin.

[DD77]

@sahil thanks, this is much better,  I've now added a bit of interaction to the sections, so for each scene we have some classes to the specific containers.

I'm also going to add some parallax once all works, I was thinking to add something like this, 

See the Pen wpwVgx?editors=1010 by rgfx (@rgfx) on CodePen

 

not quite sure is the best way possible. Could you help to implement a parallax function? So I can use it around the sections?

 

 

 

 

 

See the Pen GyRxYj?editors=1010 by davide77 (@davide77) on CodePen

 

[khagedra]

i used code from this pen 

See the Pen ppzxpR by Sahil89 (@Sahil89) on CodePen

to add anchor based scroll in my website but it is not working in my website please help here is my pen

 

See the Pen zVEjxW by twinklek55 (@twinklek55) on CodePen

[GreenSock]

Welcome to the forums, @khagedra. Unfortunately, ScrollMagic isn't a GreenSock product and we don't support it here. We really try to keep these forums focused on GSAP-specific questions. It looks like the ScrollMagic author does offer paid support which you can learn about at https://support.scrollmagic.io/. 

 

If you have any GSAP-specific questions, we'd love to help. Good luck with your project!