Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DD77

ScrollMagic horizontal scroll with anchor navigation

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.
×