Jump to content
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

Share this post

Link to post
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.

Share this post

Link to post
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?



Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.