Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Tyra Pululi

GSAP and MagiScroll scroll section to top conflict with navigation menu

Recommended Posts



I'm running into a situation and I;m not able to solve it by my self.




I have section 2 with a scroll to top when entering the section and is breaking the anchor menu, so for example if you are in section 0 and click on the menu to go to section 3 the scroll will stop at section 2.


I have been searching and tried some of the solution but none of them worked.


How could avoid the section with the autoscroll to hijack the menu?





See the Pen MZPXMe by tyra-pululi (@tyra-pululi) on CodePen

Link to comment
Share on other sites

Hi and thanks for the demo.


Yeah it seems pretty clear that the problem is that you have a scrollTo animation inside a ScrollMagic scene. 

I don't know enough about ScrollMagic (not a GreenSock product) to tell you how to fix that. 


I'm having a tough time understanding the logic of having a scrollTo animation inside a ScrollMagic scene. The whole point of ScrollMagic is to trigger animations while the user is actively scrolling the window... so why would you want to scroll the window  a position that conflicts with where the user wants to scroll to?


My hunch is that you would be better off tweening the y value of something inside of #section-2 instead of telling the window to scrollTo where #section-2 is, but again, ScrollMagic isn't my specialty.  There might be others around here that can give you better advice.

Link to comment
Share on other sites

Hi and thanks for the reply.


I had some workers at home and wasn't able to reply sooner.


Originally it was a continuous scroll but the client asked for this scrollTo functionality in this section. So i'm in a position where I need to find a solution.


Have tried different options but none of them worked.


Maybe I could pause the magicScroll scene while the menu animation is active?



Link to comment
Share on other sites

  • 2 weeks later...

At the end I found a workaround setting a variable true if the menu was clicked (set back to false when the menu animations are completed) and place the scrollTo inside an if var = false, not an optimal solution.

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.