Jump to content
GreenSock

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

Backwards anchors in stacking sections

Go to solution Solved by akapowl,

Recommended Posts

Hi,

 

I am new to GSAP. I try to do overlapping setions with menu. Everything works like I expected expcept menu anchor links. If I am on the top of the page and I click on some link. everything works perfect. Problem is when I am at the bottom of the page and I click on some link in the menu. It takes me to the right section but this section is overlapped with section before.

 

My idea was somehow reset or unpin section when leaves from the viewport, but I cant find the right code for it.

 

I tried to find any solution on forum, but all topics what I have found solve more complex problems, but none can be used for this easy task.

 

Thank you for your ideas.

See the Pen OJRWZQz by langimaster (@langimaster) on CodePen

Link to post
Share on other sites

 

Hey @greatex - welcome to the forum.

 

Here is a possible workaround for your issue.

 

On click, first check if the current scroll-position is bigger or higher than the targets offsetWidth multiplied by the index of the link you want to go to, which is the same as the index of the section in your case because they are in the same order. So this would obviously not work if you had a link placed somewhere in between, that should direct to a section somewhere else - also the calculation part would not work, if your sections had different heights.

 

Anyways, this way, you could find out, wether to scroll up, or down in your very specific scenario. 

 

If it's down, use what you did already.

If it's up, use the targets offsetWidth multiplied by the index mentioned before.

 

See the Pen 4d54755f37050bbc3ec64c9e75990c2c by akapowl (@akapowl) on CodePen

 

 

As already mentioned, this is by no means waterproof, but in your very special demo-scenario it works.

 

Hope this is at least a bit helpful.

Cheers.

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites

Hi @akapowl, thank you for your solution. It works nice and smooth. I thout there should by some calculation and condition if it goes bacward or forwards. Your approach is excelent and fully functional.

 

Thank you once again

 

Jan

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

×