Jump to content


ScrollMagic horizontal scroll with anchor navigation

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

@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


Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

@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


Link to comment
Share on other sites

  • 1 year later...

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!

  • Like 1
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.